Window is not defined error when using @react-three/xr with Next.js

[rajput-hemant]

I am working on a project using Next.js and have integrated @react-three/xr to create an immersive XR experience. However, I keep encountering a window is not defined error, which I suspect is related to the createXRStore function.

Additionally, the XR experience does not get triggered on my mobile device when using Next.js.

Could an example or guidance on how to properly use @react-three/xr in a Next.js environment be provided? Any help or advice would be greatly appreciated.

Thanks!

[bbohlender]

thanks, will fix asap

[timhc22]

I had to do something like this in NextJS:

const DynamicMainCanvas = dynamic(() => import('@/components/MainCanvas').then(mod => mod.default as React.ComponentType<MainCanvasProps>), { ssr: false });

export default function CanvasWrapper({ meta }: any) {
  const [store, setStore] = useState<any>(null);

  useEffect(() => {
    // Dynamically import createXRStore to prevent SSR issues
    import('@react-three/xr').then(({ createXRStore }) => {
      const xrStore = createXRStore();
      setStore(xrStore);
    });
  }, []);