Import component from published npm package using react-loadable, cannot find module error

Question

I am trying to import components from a published npm package dynamically using react-loadable. The import is successful with components located in the src/ folder. However any components that I try to import from node_modules produces the following error:

Loadable error:
Error: Cannot find module '@material-ui/core/Button'
    at |groupOptions: {}|namespace object:1074:1

Code:

const Component = Loadable({
    loader: () => import('@material-ui/core/Button'),
    loading: () => <div>Loading...</div>,
});

Some context: The main goal is to be able to pass a import path (in src/ or node_modules) string to loadable and have loadable import the component (and do code splitting). If this is not possible with react-loadable, any suggestions are welcome. Thanks in advance.

Answer 1

1)Usually these are the paths of the directories of a react app:

/myapp
/myapp/src
/myapp/src/Component1.jsx
/myapp/src/Component2.jsx
/myapp/node_modules/library3/Component_3_1.jsx
etc..


2)This code loads dynamically the Component1.jsx
const Component = Loadable({
    loader: () => import("./Component1"),
    loading: () => <div>Loading...</div>,
});


3)I dont think it's possible to load dynamically component outside the folder /src.

Can you copy and paste the component /library3/Component_3_1.jsx under/inside the folder /src ?

Can you create an hard/soft link?

Try it.



4)Off topic.
Remember you cannot use path variable:

Path_Component_3_1="/library3/Component_3_1"

const Component = Loadable({
    loader: () => import(Path_Component_3_1),
    loading: () => <div>Loading...</div>,
});