0

I am unable to debug and find the issue on windows reference error issue.

ReferenceError: window is not defined
    at /home/ubuntu/Desktop/project/my-app/node_modules/@splidejs/splide/dist/js/splide.js:5857:1
    at Object.<anonymous> (/home/ubuntu/Desktop/project/my-app/node_modules/@splidejs/splide/dist/js/splide.js:5858:12)
    at Module._compile (internal/modules/cjs/loader.js:1085:14)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)
    at Module.load (internal/modules/cjs/loader.js:950:32)
    at Function.Module._load (internal/modules/cjs/loader.js:790:14)
    at Module.require (internal/modules/cjs/loader.js:974:19)
    at require (internal/modules/cjs/helpers.js:92:18)
    at Object.<anonymous> (/home/ubuntu/Desktop/project/my-app/node_modules/@splidejs/react-splide/dist/js/components/Splide.js:10:38)
    at Module._compile (internal/modules/cjs/loader.js:1085:14)
Hungry AI
  • 1
  • 1
  • possible duplicate? https://stackoverflow.com/questions/55151041/window-is-not-defined-in-next-js-react-app – Yunwei.W Jul 09 '21 at 00:37
  • no, I m trying to import some library and when I insert that inside export: `useEffect(() => { import { Splide, SplideSlide } from '@splidejs/react-splide'; }, [])` I get other error saying: import' and 'export' may only appear at the top level So, I need help in how to import these library? – Hungry AI Jul 09 '21 at 00:39
  • https://nextjs.org/docs/advanced-features/dynamic-import try this one – Yunwei.W Jul 09 '21 at 00:47
  • @Yunwei.W- already seen - I get the error inside `component/hello` when I shift code there. and I have 2 object import and not single object import. like "Splide nd SplideSlide" – Hungry AI Jul 09 '21 at 00:49
  • I need to import `Splide` and `Sideslide` from same package, not sure, how can I import them and re use them – Hungry AI Jul 09 '21 at 00:59
  • 1
    https://stackoverflow.com/questions/52939439/dynamic-import-node-module-with-next-js – Yunwei.W Jul 09 '21 at 01:24

1 Answers1

0

That means @splidejs/react-splide only supports client-side rendering (Next.js is a server-side rendering framework in case you never notice it). You can make a simple check to see whether your website is running on client-side.

Something similar to

<SomeComponent>
  {/* only render <Splide/> if window exists, i.e. on the client side */}
  {window && <Splide />}
  <AnotherComponent />
</SomeComponent>
Matthew Kwong
  • 2,548
  • 2
  • 11
  • 22
  • I just added `{window && }` and I am still having error as `window` is not defined. – Hungry AI Jul 09 '21 at 01:07
  • Ah, there is a Next specific solution here: https://dev.to/vvo/how-to-solve-window-is-not-defined-errors-in-react-and-next-js-5f97 – Matthew Kwong Jul 09 '21 at 01:12
  • unfortunately, I have tried both - `useEffect` and `typeof` but getting error as, import should be at root level of page. – Hungry AI Jul 09 '21 at 01:16
  • Import does NOT always have to be at the top. In the example I attached, he used something like `import("@splidejs/react-splide")` . This is a syntax of dynamic import. – Matthew Kwong Jul 09 '21 at 01:22
  • ahh! i see now, importing without value ... Thanks! can you update the answer with these changes, I will accept. – Hungry AI Jul 09 '21 at 01:29