Nextjs Window not defined

[zifahm]

The bug
I am getting a window is not defined error while using it on nextjs.

To Reproduce
Codesandbox demo form the docs in nextjs with apollo

Expected behavior
Run with no error.

Screenshots

window is not defined
ReferenceError: window is not defined
    at r (/home/afifia/Documents/Project/neutron/node_modules/react-spaces/dist/index.js:1:1903)
    at s (/home/afifia/Documents/Project/neutron/node_modules/react-spaces/dist/index.js:1:1991)
    at e.exports (/home/afifia/Documents/Project/neutron/node_modules/react-spaces/dist/index.js:1:5562)
    at Object.<anonymous> (/home/afifia/Documents/Project/neutron/node_modules/react-spaces/dist/index.js:1:11119)
    at n (/home/afifia/Documents/Project/neutron/node_modules/react-spaces/dist/index.js:1:124)
    at Module.<anonymous> (/home/afifia/Documents/Project/neutron/node_modules/react-spaces/dist/index.js:1:20622)
    at n (/home/afifia/Documents/Project/neutron/node_modules/react-spaces/dist/index.js:1:124)
    at /home/afifia/Documents/Project/neutron/node_modules/react-spaces/dist/index.js:1:923
    at Object.<anonymous> (/home/afifia/Documents/Project/neutron/node_modules/react-spaces/dist/index.js:1:933)
    at Module._compile (internal/modules/cjs/loader.js:776:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:787:10)
    at Module.load (internal/modules/cjs/loader.js:653:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
    at Function.Module._load (internal/modules/cjs/loader.js:585:3)
    at Module.require (internal/modules/cjs/loader.js:690:17)
    at require (internal/modules/cjs/helpers.js:25:18)

Desktop (please complete the following information):

• OS: Linux Mint
• Browser Chrome
• Version 75

[zifahm]

I had to do this to work hmm

const ViewPort = dynamic(
  // @ts-ignore
  () => import("react-spaces").then(mod => mod.ViewPort),
  { ssr: false }
);

const LeftResizable = dynamic(
  // @ts-ignore
  () => import("react-spaces").then(mod => mod.LeftResizable),
  { ssr: false }
);
const RightResizable = dynamic(
  // @ts-ignore
  () => import("react-spaces").then(mod => mod.RightResizable),
  { ssr: false }
);
const Demo = () => (
  <ViewPort>
    <LeftResizable size="25%" trackSize={true} style={grayStyle}>
      hi
    </LeftResizable>

    <RightResizable size="25%" trackSize={true} style={grayStyle}>
      hi
    </RightResizable>
  </ViewPort>
);

const grayStyle = { backgroundColor: "#eee" };

[aeagle]

Presumably there is a reference to window somewhere before componentDidMount(). I haven't had much exposure to next.js so will try to repro the setup.

[aeagle]

I've pinpointed this down to the bundling and specifically the bundling of SCSS which breaks the components when doing SSR (it's currently using style-loader re this issue webpack-contrib/style-loader#109). I am revising the bundling to use rollup instead of webpack and also revising the way the styling is applied to the components which should fix this issue. Hopefully this will be ready for release in the next version.

[aeagle]

@zifahm I've released version 0.1.14 now which has some changes into how the library is bundled and more specifically how styling is added to the page which should allow you to use the components without your workaround above. Let me know if this works for you. It does however exhibit the standard late style load behaviour when a page is first displayed due to the styling only being injected on to the page when the javascript has been fully loaded.

Due to the benefits of having a layout library working with SSR I am working on a server-side specific bundle which in intended to be used with SSR specific applications. You can currently try using this by importing 'react-spaces/dist/server' instead of 'react-spaces' and also importing 'react-spaces/dist/server.css' by using @zeit/next-css. It's currently experimental though and has some placement problems at the moment but you can check out a test app here - https://github.com/aeagle/react-spaces/tree/master/nextjsdemo

[zifahm]

@aeagle sure thanks. Ill let you know if i am incurring any problems.

[aeagle]

I'll close this now. I can reopen if you are still having problems.