Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

"window is not defined" - SSR support

See original GitHub issue

I received this error when attempting to retrieve the value from a selector. This occurs in a Next.js 9.4 project, which is inherently server side rendered.

Looking through the source code it looks like there are a few references to the window object that aren’t available in SSR. Are there any plans to support SSR? I tried to work around it by checking for the presence of the window object but because I’m trying to conditionally use state it breaks the rules of hooks 😦

ReferenceError: window is not defined
    at r (C:\git\nextjs-workflows\node_modules\recoil\dist\recoil.js:1:712)
    at C:\git\nextjs-workflows\node_modules\recoil\dist\recoil.js:1:1276
    at e (C:\git\nextjs-workflows\node_modules\recoil\dist\recoil.js:1:1290)
    at C:\git\nextjs-workflows\node_modules\recoil\dist\recoil.js:1:19654
    at i (C:\git\nextjs-workflows\node_modules\recoil\dist\recoil.js:1:19929)
    at Object.c [as get] (C:\git\nextjs-workflows\node_modules\recoil\dist\recoil.js:1:19966)
    at x (C:\git\nextjs-workflows\node_modules\recoil\dist\recoil.js:1:4554)
    at C:\git\nextjs-workflows\node_modules\recoil\dist\recoil.js:1:6719
    at Object.replaceState (C:\git\nextjs-workflows\node_modules\recoil\dist\recoil.js:1:10416)
    at C:\git\nextjs-workflows\node_modules\recoil\dist\recoil.js:1:6684
    at Object.trace (C:\git\nextjs-workflows\node_modules\recoil\dist\recoil.js:1:4312)
    at getRecoilValueAsLoadable (C:\git\nextjs-workflows\node_modules\recoil\dist\recoil.js:1:6652)
    at n (C:\git\nextjs-workflows\node_modules\recoil\dist\recoil.js:1:13390)
    at r (C:\git\nextjs-workflows\node_modules\recoil\dist\recoil.js:1:13682)
    at Object.getRecoilState (C:\git\nextjs-workflows\node_modules\recoil\dist\recoil.js:1:13775)
    at useRecoilState (C:\git\nextjs-workflows\node_modules\recoil\dist\recoil.js:1:14988)

Example consumer code:


export const projectNameState = selector({
  key: "projectName",
  get: ({ get }) => ...
});

export const ProjectNameProvider = () => {
  const [projectName, setProjectName] = useRecoilState(projectNameState);
  return (
    <ProjectNameComponent
      projectName={projectName}
      setProjectName={setProjectName}
    />
  );
};