Error building next js app

[spandres]

Problem

I get the following error message after running npm run build:

ReferenceError: window is not defined

Description

I'm importing from a client component ("use client") the wheel component. Unfortunately, the build fails. I verified the problem was the wheel component because after removing it, the build was completed as expected.

I tried the wheel component using the basic setup in the README.

The wheel component works when I run the npm run dev command. The problem is observed only when trying to build the app.

[Gabriel-Passoss]

Same issue

[spandres]

My workaround was to create a wrapper component at the layout level.

export default function Wrapper({ children }: {children?: ReactNode}) {
  const [ready, setReady] = useState(false);

  useEffect(() => {
    setReady(true);
  }, []);

  if (!ready) return null;

  return <main>{children}</main>;
}

Just put the wheel component anywhere inside the wrapper, and it should work.

[supramaxis]

My workaround was to create a wrapper component at the layout level.

export default function Wrapper({ children }: {children?: ReactNode}) {
  const [ready, setReady] = useState(false);

  useEffect(() => {
    setReady(true);
  }, []);

  if (!ready) return null;

  return <main>{children}</main>;
}

Just put the wheel component anywhere inside the wrapper, and it should work.

did not worked for me sadly on nextjs

[berthelol]

This one worked for me
https://www.npmjs.com/package/react-wheel-of-prizes

[abdulsami822]

Any update on this issue?

[buivangiang-12148701]

worked for me:

Modify your import statement for the Wheel component to use Next.js is dynamic imports with ssr set to false. This tells Next.js to only render the component on the client side.

Old: import { Wheel } from 'react-custom-roulette';

Replace:

import dynamic from 'next/dynamic';
const Wheel = dynamic(() => import('react-custom-roulette').then((mod) => mod.Wheel), { ssr: false, });

const WheelOfLuckyGame = (props) => { ... . return ( <Wheel ...../> )}