Динамический импорт в реакции не работает при попытке импортировать компонент в другой каталог

Если FooterComp находится под src, путь должен быть './FooterComp/Footer', а не '../FooterComp/Footer'

Редактировать

Index.js

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>
    );
  }

Существует ограничение при использовании динамического импорта с «переменными частями», такими как import(`${path}`), поскольку ${path} является переменной.

Во время создания пакета Webpack

В вашем случае, когда компонент import(`${path}`) в Dynamic назывался webpack, создавал пакет. Этот комплект был для FirstComponent компонента. Внутри этого пакета веб-пакет содержит список компонентов, которые можно динамически импортировать с помощью «переменных частей» в компоненте FirstComponent. Он содержал только файлы, которые находились в той же папке, где находился компонент FirstComponent. Это потому, что вы использовали import(`${path}`) в FirstComponent.

Все это происходит потому, что webpack при компиляции не знает, какой будет точный путь импорта во время выполнения, так как вы используете динамический импорт с «переменными частями».

Во время запроса приложения React

Когда в компоненте Dynamic было выполнено import(`${path}`). Пакет для FirstComponent был запрошен. Как только пакет был получен, и он выполнил свой код, и path, который вы указали в качестве компонента props - FirstComponent, не было в списке компонентов, которые можно динамически импортировать с помощью «переменных частей».

То же самое относится и к компоненту Dynamic, если вы попытаетесь динамически импортировать файлы с «переменными частями» для файлов, которые находятся вне папки src, вы получите ту же ошибку.

Итак, чтобы решить эту проблему, у вас есть пара опций

1) Поместите оба файла в одну папку

, т.е.

'src/Components/FirstComponent'

'src/Components/Footer'

И используйте

// In FirstComponent.js
   componentDidMount() {
      const { path } = this.props;
      import(`${path}`)
      .then(module => this.setState({ module: module.default }))   
   }


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

2) быть более точным, насколько это возможно

т.е.

// In FirstComponent.js
 componentDidMount() {
      const { path } = this.props;
      import(`../FooterComp/${path}`)
      .then(module => this.setState({ module: module.default }))   
 }

И использовать

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

ОБНОВЛЕНИЕ

Пакет, созданный веб-пакетом для componentDidMount:

1) для динамического импорта с переменными, но более конкретным способом, например 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 });
          });

Код для [ 1126] в связке

/***/ "./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) для динамического импорта с переменными, т.е. 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 });
      });

Код для ./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;

/***/ }),