Running into an issue with Gatsby.js, "Window is not defined"

[matt0rtega]

Was wondering if anyone else was running into this problem with Gatsby.js. I am getting a "Window is not defined error" when trying to build with p5 and react-p5-wrapper. It seems like the "window" is actually in the p5.js file. I can currently run in on the local server, just can't build the Gatsby app.

[FreeArtBureau]

Hi there, I'm getting the same error and behaviour. I'm not too sure how to solve this issue as I'm new to the one page app business & components. Any solutions please?

[and-who]

Gatsby is a Framework which implements Serverside rendering and such.
I imagine that there is the Issue, since there is no window at compile-/render-time.

This is only a guess, since I never used Gatsby

I Will close this Issue, since this is related to:
#2
And a possible Solution could be:
#2 (comment)

[willmcl]

@and-who is correct. This is the method that worked for me:

Install loadable: npm install @loadable/component

import sketch from 'path-to-sketch';
import loadable from '@loadable/component';
const LoadableP5 = loadable(() => import('react-p5-wrapper'));

function MyHolder() {
    return <LoadableP5 sketch={sketch} color="green"/>
}

export default MyHolder;

[graeme120]

@and-who is correct. This is the method that worked for me:

Install loadable: npm install @loadable/component

import sketch from 'path-to-sketch';
import loadable from '@loadable/component';
const LoadableP5 = loadable(() => import('react-p5-wrapper'));

function MyHolder() {
    return <LoadableP5 sketch={sketch} color="green"/>
}

export default MyHolder;

@willmcl I'm getting this error any time I try to use this method

Error in function hoistNonReactStatics in ./node_modules/hoist-non-react-statics/dist/hoist-non-react-statics.cjs.js:70
"Don't hoist over string (html) components

Any ides what this could mean / why this is happening?