Loadable not accepting react-p5-wrapper as input about loadable-components HOT 7 CLOSED

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.

from loadable-components.

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?

from loadable-components.

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.

from loadable-components.

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

from loadable-components.

..... 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

from loadable-components.

..... 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)

from loadable-components.

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.

from loadable-components.