Loadable not accepting react-p5-wrapper as input

[graeme120]

🐛 Bug Report

Getting this issue every time I try to use loadable-components with react-p5-wrapper. The plugin works fine unless i'm trying to use loadable components, wherein i'm given this error message

Error in function hoistNonReactStatics in ./node_modules/hoist-non-react-statics/dist/hoist-non-react-statics.cjs.js:70 Cannot convert undefined or null to object

./node_modules/hoist-non-react-statics/dist/hoist-non-react-statics.cjs.js:70

68 | // don't hoist over string (html) components 69 | if (objectPrototype) { 70 | var inheritedComponent = getPrototypeOf(sourceComponent); 71 | 72 | if (inheritedComponent && inheritedComponent !== objectPrototype) { 73 | hoistNonReactStatics(targetComponent, inheritedComponent, blacklist);

To Reproduce

`import loadable from "@loadable/component"
const LoadableP5 = loadable(() => import('react-p5-wrapper'));

function MySketch(p5) {
  p5.setup = () => {
    p5.createCanvas(600, 400, p5.WEBGL);
    // const headshot = p5.loadImage(head);
  };

  p5.draw = () => {
    p5.background(250);
    p5.normalMaterial();
    p5.push();
    p5.rotateZ(p5.frameCount * 0.01);
    p5.rotateX(p5.frameCount * 0.01);
    p5.rotateY(p5.frameCount * 0.01);
    p5.plane(100);
    p5.pop();
  };
}

function App() {
  return <LoadableP5 sketch={MySketch}/>;
}`

[theKashey]

Sounds like a bug in hoist-non-react-statics.

However, I would consider removing this dependency as it's lagging a little behind everchanging requirements.

[graeme120]

Sounds like a bug in hoist-non-react-statics.

However, I would consider removing this dependency as it's lagging a little behind everchanging requirements.

@theKashey For sure, how do I remove the dependency? And would the plugin work without it? Would I have to substitute it with anything?

[theKashey]

The change is required from within loadable.

However can you try debug the issue as there should be a reason why this functionality blows up, something very particular.

[graeme120]

The change is required from within loadable.

However can you try debug the issue as there should be a reason why this functionality blows up, something very particular.

@theKashey Oh, as in someone would need to commit a change to the loadable repo? And yes, it seems to be the importing of react-p5-wrapper that blows it up, but I cannot see any reason why it would be interpreted as a simple string. Any workarounds you know of that do the same thing as loadable-components? I'm using Gatsby and having a very hard time getting my p5.js files to do SSR. Also quite new to react/node/gatsby

[theKashey]

..... because you are expected to do import { ReactP5Wrapper } from "react-p5-wrapper"; - a named, not default export.

just change your code a little

import loadable from "@loadable/component"

const LoadableP5 = loadable(() => import('react-p5-wrapper'), {
  resolveComponent: ({ReactP5Wrapper}) => ReactP5Wrapper,
});

see https://loadable-components.com/docs/api-loadable-component/#optionsresolvecomponent

[graeme120]

..... because you are expected to do import { ReactP5Wrapper } from "react-p5-wrapper"; - a named, not default export.

just change your code a little

import loadable from "@loadable/component"

const LoadableP5 = loadable(() => import('react-p5-wrapper'), {
  resolveComponent: ({ReactP5Wrapper}) => ReactP5Wrapper,
});

see https://loadable-components.com/docs/api-loadable-component/#optionsresolvecomponent

@theKashey Hm, its loading now, but when I switch pages and return it doesnt reload, the sketch is just stuck as 'loading', does that have anything to do with loadable-components? Also, thank you so much for the advice!

Here are the errors in the console:

GET http://localhost:8000/about/[object%20Object] 404 (Not Found)

head-export-handler-for-browser.js:72 TypeError: o.indexOf is not a function at eval (p5.min.js:2:1)

[theKashey]

Yeah, I am not sure loadable is a problem here, as well not sure it can be a solution - the new problem seems to be originated in P5.