Brtdku

Hello everyone I have been trying dynamic imports in react for rendering my components for an app created with CRA (create-react-app) and while it works perfectly for some cases but for some it returns a cannot load module error for instance I loaded a component(placed in a directory under src) dynamically in my index.js which works fine but when I try to render a child or nested component inside that also with a dynamic import approach it gives error cannot load module. Note this error occurs only if the nested component is placed outside the directory of the original parent component enough talk here is the code.

My index.js placed under src.

    import React, { Component } from 'react';

    import ReactDOM from 'react-dom';

    import './index.css';



    class Dynamic extends Component {

      constructor(props) {

        super(props);

        this.state = { module: null };

      }

      componentDidMount() {

          console.log('in comp mount')

          //alert("in comp mount")

        const { path } = this.props;

        import(`${path}`)

          .then(module => this.setState({ module: module.default }))

     }

      render() {

          console.log('in render')

         // alert("in render")

        const { module: Component } = this.state; // Assigning to new variable names @see: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

        return(

          <div>

            {Component && <Component path= '../FooterComp/Footer' />}

          </div>

        )

      }

    }



ReactDOM.render(<Dynamic path='./Components/FirstComponent' />, document.getElementById('root'));

FirstComponent.js placed in Components directory under src.

import React, { Component } from 'react';

import logo from '../logo.svg';

import '../FirstApp.css';



class App extends Component {



    constructor(props) {

    super(props);

    this.state = { module: null };

  }

  componentDidMount() {

      console.log('in comp mount')

      //alert("in comp mount")

    const { path } = this.props;

    alert(path)

    import(`${path}`)

      .then(module => this.setState({ module: module.default }))

 }



  render() {

      const { module: Component } = this.state;

    return (

      <div className="App">

        <header className="App-header">

        <img src={logo} className="App-logo" alt="logo" />

          <p>

            Edit <code>src/App.js</code> and save to reload.

          </p>

          <a

            className="App-link"

            href="https://reactjs.org"

            target="_blank"

            rel="noopener noreferrer"

          >

            Learn React

          </a>

        </header>

        {Component && <Component />}

      </div>

    );

  }

}



export default App;

Footer.js placed in FooterComp directory under src.

import React, { Component } from 'react';

import '../App.css';



class Footer extends Component {

    componentDidMount()

    {

        console.log('in componentDidMount of Footer')

    }

  render() {

      console.log('in render of Footer')

    return (

      <div className="App">

        <h1>Edited by Me</h1>

      </div>

    );

  }

}



export default Footer;

Why does this work when I refer my firstcomponent from my index.js but doesnt work for footer component when trying to import in my firstcomponent?

Errormessage: Error: Cannot find module '../FooterComp/Footer'

Also note that if i place Footer component in the same directory as Firstcomponent and adjust the path it works fine

There’s limitation when using dynamic imports with "variable parts" like import(`${path}`) as ${path} is a variable.

At compile time:

In your case when import(`${path}`) in Dynamic component was called webpack created a bundle. That bundle was for FirstComponent component. Inside that bundle webpack provided list of components which you could dynamically import with "variable parts" in FirstComponent component. It only contained files that were inside the same folder where FirstComponent component was. This is because you used import(`${path}`) in FirstComponent.

This all happens because webpack at compile does not know what will be the exact import path at runtime as you are using dynamic imports with "variable parts".

At Run time

When import(`${path}`) was executed in Dynamic Component. Bundle for FirstComponent was requested. As soon as the bundle was received and it executed its code and the path you provided as props to FirstComponent component was not in the list of components which you could dynamically import with "variable parts".

This is also same for Dynamic component if you try to dynamically import files with "variable parts" for the files that are outside src folder you will get same error.

So to solve this you have couple of options

1) place both files in same folder

i.e

'src/Components/FirstComponent'



'src/Components/Footer'

And use

// In FirstComponent.js

   componentDidMount() {

      const { path } = this.props;

      import(`${path}`)

      .then(module => this.setState({ module: module.default }))   

   }





{Component && <Component path='./Footer' />} // Index.js

2) be more specific as possible

i.e

// In FirstComponent.js

 componentDidMount() {

      const { path } = this.props;

      import(`../FooterComp/${path}`)

      .then(module => this.setState({ module: module.default }))   

 }

And use

{Component && <Component path='Footer' />} //  In index.js

UPDATE

Bundle created by webpack for componentDidMount:

1) for dynamic import with variables but in more specific way i.e import(`../FooterComp/${path}`)

 _createClass(App, [{

        key: "componentDidMount",

        value: function componentDidMount() {

          var _this2 = this;



          var path = this.props.path;

          // "import(`../FooterComp/${path}`)" is converted to code below

          __webpack_require__(/*! ../FooterComp */ "./src/FooterComp lazy recursive ^\.\/.*$")("./" + path)

          .then(function (module) {

            return _this2.setState({ module: module.default });

          });

Code for ./src/FooterComp lazy recursive ^\.\/.*$ in the bundle

/***/ "./src/FooterComp lazy recursive ^\.\/.*$":

/*!**************************************!*

  !*** ./src/FooterComp lazy ^./.*$ ***!

  **************************************/

/*! dynamic exports provided */

/*! all exports used */

/***/ (function(module, exports, __webpack_require__) {



var map = {

    "./Footer": [

        "./src/FooterComp/Footer.jsx",

        0

    ],

    "./Footer.jsx": [

        "./src/FooterComp/Footer.jsx",

        0

    ]

};

function webpackAsyncContext(req) {

    var ids = map[req];

    if(!ids)

        // Code throwing "ERROR"

        return Promise.reject(new Error("Cannot find module '" + req + "'."));

    return __webpack_require__.e(ids[1]).then(function() {

        return __webpack_require__(ids[0]);

    });

};

webpackAsyncContext.keys = function webpackAsyncContextKeys() {

    return Object.keys(map);

};

webpackAsyncContext.id = "./src/FooterComp lazy recursive ^\.\/.*$";

module.exports = webpackAsyncContext;



/***/ })

2) for dynamic import with variables i.e import(`${path}`)

_createClass(App, [{

    key: "componentDidMount",

    value: function componentDidMount() {

      var _this2 = this;



      var path = this.props.path;

         // "import(`${path}`)" is converted to code below

      __webpack_require__(/*! . */ "./src/Components lazy recursive ^.*$")("" + path).then(function (module) {

        return _this2.setState({ module: module.default });

      });

Code for ./src/Components lazy recursive ^.*$

/***/ "./src/Components lazy recursive ^.*$":

/*!**********************************!*

  !*** ./src/Components lazy ^.*$ ***!

  **********************************/

/*! dynamic exports provided */

/*! all exports used */

/***/ (function(module, exports, __webpack_require__) {



var map = {

    "./FirstComponent": [

        "./src/Components/FirstComponent.jsx"

    ],

    "./FirstComponent.jsx": [

        "./src/Components/FirstComponent.jsx"

    ]

};

function webpackAsyncContext(req) {

    var ids = map[req];

    if(!ids)

        // Code throwing "ERROR"

        return Promise.reject(new Error("Cannot find module '" + req + "'."));

    return Promise.all(ids.slice(1).map(__webpack_require__.e)).then(function() {

        return __webpack_require__(ids[0]);

    });

};

webpackAsyncContext.keys = function webpackAsyncContextKeys() {

    return Object.keys(map);

};

webpackAsyncContext.id = "./src/Components lazy recursive ^.*$";

module.exports = webpackAsyncContext;



/***/ }),

If FooterComp is under src, the path should be './FooterComp/Footer' not '../FooterComp/Footer'

Edit

Index.js

    render() {

          console.log('in render')

         // alert("in render")

        const { module: Component } = this.state; 

        return(

          <div>

            {Component && <Component path='./Components/FirstComponent' />}

          </div>

        )

      }

    }



ReactDOM.render(<Dynamic />, document.getElementById('root'));

FirstComponent.js

render() {

      const { module: Component } = this.state;

    return (

      <div className="App">

        <header className="App-header">

        <img src={logo} className="App-logo" alt="logo" />

          <p>

            Edit <code>src/App.js</code> and save to reload.

          </p>

          <a

            className="App-link"

            href="https://reactjs.org"

            target="_blank"

            rel="noopener noreferrer"

          >

            Learn React

          </a>

        </header>

        {Component && <Component path= '../FooterComp/Footer' />}

      </div>

    );

  }