"window not defined" error in NextJS app

[SIRHAMY]

This happens because p5 is imported before window is defined (e.g. server-side rendering and build step). By moving the require("p5") line into componentDidMount this can be resolved.

[jamesrweb]

Hi @SIRHAMY, thanks for raising the issue. As this is a client side project, the assumption is that window will always be defined.

You could attempt lazy loading your modules - this would be my preferred way of doing things.

Alternatively you could just add a regular script tag to your HTML file and link it to our unpkg link for the script, thus avoiding the build step entirely.

[pikeas]

Just bit by this as well. I'm creating the wrapper component in useEffect(..., []), which should only run on the client side when window exists, but I'm still seeing "window not defined" errors.

I'll try lazy loading and a regular script tag if that fails, but in either case I'm worried about missing out on Intellisense and type checking, and confused about why this would happen when scoped to a client side only block.

[halilatilla]

Just bit by this as well. I'm creating the wrapper component in useEffect(..., []), which should only run on the client side when window exists, but I'm still seeing "window not defined" errors.

I'll try lazy loading and a regular script tag if that fails, but in either case I'm worried about missing out on Intellisense and type checking, and confused about why this would happen when scoped to a client side only block.

You can use with Nextjs like that.

import dynamic from 'next/dynamic'

const P5comp = dynamic( () => import('....'), { ssr: false } )

[mak1986]

import { P5Instance, Sketch, P5WrapperProps } from 'react-p5-wrapper'
const ReactP5Wrapper = dynamic(() => import('react-p5-wrapper')
    .then(mod => mod.ReactP5Wrapper as any), {
    ssr: false
}) as unknown as React.NamedExoticComponent<P5WrapperProps>

[Allakazan]

Having the same problem using Remix. Can someone help me ?

[jamesrweb]

Create a new issue and provide all code and context such as error messages, for what you're trying to do. Ideally with a minimum viable example I can run on repl.it or stackblitz for example.