Search code examples
reactjsreact-lazy-load

Lazy loading: Can't load dynamic module

I try to load dynamically in my dashboard using React.lazy() and Suspense component. It works really well with an hardcoded value, but not with a variable. I'm a little bit speechless right now. Probably a dumb error!

Works:

const WidgetComponent = React.lazy(() => import('../../../widgets/dummy/Dummy'));

Don't works:

// widget.path === '../../../widgets/dummy/Dummy'
const WidgetComponent = React.lazy(() => import(widget.path));

Don't works also:

const WidgetComponent = React.lazy(() => import(`${widget.path}`));

One thing I can add is the widget prop is filled from a json file in public folder.

Solution

  • Ok, with the help of @Ajeet Shah I've solved my problem.

    I've created a new property with the component name instead and I did that :

    const WidgetComponent = React.lazy(() => import(`../../../widgets/${widget.component}`));

    Not the most elegant solution, but it works.