react dynamic render with path by props value

Question

I'm trying to render one component with react.lazy in the path is a variable on my props but i get error with the webpack.

My component father send the props like this:

      <DynamicModal url = 'Impuesto/formulario'  />

and the component with reactLazy is this one:

    import React from 'react';
import { withRouter } from 'react-router';
import {SpinLoadingModal} from 'config/SpinLoading/index.js';



function DynamicModal(props) {

const path = props.url;



  const LazyComponent = React.lazy(() => import(path));

  return (

    <React.Suspense fallback={<SpinLoadingModal />}>
      <div>
      <LazyComponent/>
      </div>
    </React.Suspense>
  );
}


export default withRouter (DynamicModal);

And the error i can see in the console:

> Uncaught Error: Cannot find module 'Impuesto/formulario'
    at DynamicModal lazy groupOptions: {} namespace object:5
(anonymous) @ DynamicModal lazy groupOptions: {} namespace object:5
> 
> function webpackEmptyAsyncContext(req) {
    // Here Promise.resolve().then() is used instead of new Promise() to prevent
    // uncaught exception popping up in devtools
    return Promise.resolve().then(function() {
        var e = new Error("Cannot find module '" + req + "'");
        e.code = 'MODULE_NOT_FOUND';
        throw e;
    });
}
webpackEmptyAsyncContext.keys = function() { return []; };
webpackEmptyAsyncContext.resolve = webpackEmptyAsyncContext;
module.exports = webpackEmptyAsyncContext;
webpackEmptyAsyncContext.id = "./src/config/DynamicModal lazy recursive";

And this in my browser:

× Error: Cannot find module './Impuesto/formulario' (anonymous function) src/config lazy /^/.*$/ groupOptions: {} namespace object:123

I read before about check in console the import here in stack and trying to check with this code:

 import(`../components/${res}`).then(() => {
    console.log("Loaded")
  }, (err)=>{
    console.log("Error", err)
  })

but dont help me too much and the error continue. Really thank you for any help or advice!

NOTE: if i change the code with:

  const LazyComponent = React.lazy(() => import('Impuesto/formulario'));

this works but i really want to change with variable! Well if this is possible! lol

You can create a map object of all of lazy imports outside of your component and then pass prop as a key to that map — gadi tzkhori, Jan 21 '20 at 20:56
made some changes, see example https://codesandbox.io/s/elastic-kare-l5uxf — gadi tzkhori, Jan 21 '20 at 22:00
I dont know if i have to change something with the webpack or what i'm doing wrong. Because i only get the error becasue the path is a variable. — Carlos Deseda, Jan 21 '20 at 22:04
see here https://stackoverflow.com/questions/53059420/dynamic-path-import-for-lazy-loading-of-components-using-react-loadable. the solution I gave might be wrong, webpack needs to know the path in order to split the bundles I think — gadi tzkhori, Jan 21 '20 at 22:13
I read it befor but i cant get a solution. Only the same error! — Carlos Deseda, Jan 21 '20 at 22:17
with create react app it works...I dunno how webpack do the magic — gadi tzkhori, Jan 21 '20 at 22:32

gadi tzkhori · Accepted Answer · 2020-01-22T08:35:49.560

In addition to the comment solution I suggested(which make more sense to me), you can put your resolved import on state:

    function DynamicModal(props) {
      const [LazyComponent, setLazyComponent] = React.useState(() => () => 
      <div/>);

       React.useEffect(() => {
            const Lzy = React.lazy(() => import(`./${props.url}`));
            setLazyComponent(Lzy);
       }, [props.url]);


      return (

        <React.Suspense fallback={<SpinLoadingModal />}>
          <div>
          <LazyComponent/>
          </div>
        </React.Suspense>
      );
    }

Another solution as I mentioned earlier in the comments(much better imo):

const LazyComp1 = React.lazy(() => import('./Comp1'));
const LazyComp2 = React.lazy(() => import('./Comp2'));
const LazyComp3 = React.lazy(() => import('./Comp3'));

const lazyMap = {
 LazyComp1,
 LazyComp2,
 LazyComp3
};

function DynamicModal(props) {
   const LazyComponent = lazyMap[props.lazyKey]           
          return (

            <React.Suspense fallback={<SpinLoadingModal />}>
              <div>
              <LazyComponent/>
              </div>
            </React.Suspense>
          );
        }

react dynamic render with path by props value

1 Answers1

Linked