Nextjs Window not defined about react-spaces HOT 6 CLOSED

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.

from react-spaces.

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" };

from react-spaces.

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.

from react-spaces.

@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

from react-spaces.

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

from react-spaces.

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

from react-spaces.