尝试在另一个目录中导入组件时，动态导入反应不起作用

Question

大家好，我一直在尝试动态导入来为使用 CRA (create-react-app) 创建的应用程序渲染我的组件，虽然它在某些情况下运行良好，但对于某些情况，它返回一个无法加载模块错误，例如我加载了一个组件（放置在 src 下的目录中）在我的动态中index.js工作正常，但是当我尝试在其中渲染子组件或嵌套组件时，也使用动态导入方法，它会出现错误无法加载模块。请注意，仅当嵌套组件放置在原始父组件的目录之外时才会发生此错误，这里的代码足够多。

我的 index.js 放在 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 放在 src 下的 Components 目录中。

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 放在 src 下的 FooterComp 目录下。

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;

为什么当我从我的第一个index.js组件中引用我的第一个组件但在尝试导入我的第一个组件时不适用于页脚组件时，为什么会这样？

错误信息： Error: Cannot find module '../FooterComp/Footer'

另请注意，如果我将页脚组件放在与 Firstcomponent 相同的目录中并调整路径，则它可以正常工作

Answer 1

使用带有可变部分的动态导入时存在限制。

Webpack 文档

不可能使用完全动态的导入语句，例如 import(foo)。因为 foo 可能是系统或项目中任何文件的任何路径。

import() 必须至少包含一些关于模块所在位置的信息。捆绑可以限制在特定目录或文件集，以便在使用动态表达式时 - 包括可能在 import() 调用中请求的每个模块。例如，import( ./locale/${language}.json) 将导致每个 .json 文件在要捆绑到新块中的 ./locale 目录中。在运行时，计算变量语言后，任何文件（如 english.json 或 German.json）都可以使用。

在您的情况下，在FirstComponent组件中动态导入的构建期间，捆绑仅限于组件所在的目录，FirstComponent即Components目录。

这意味着，webpack 会找到目录中的所有文件，Components然后为它们创建块。然后在运行时调用动态导入时，webpack 将提供与传入值对应的块。

由于您传递的path= '../FooterComp/Footer'没有相应的块，因此 webpack 会抛出错误。

这对于Dynamic组件也是一样的。如果您尝试为文件src夹外的文件动态导入可变部分，则会出现相同的错误。

所以要解决这个问题，你有几个选择

1. 将两个文件放在同一个文件夹中

IE

'src/Components/FirstComponent.js'

'src/Components/Footer.js'

并使用

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


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

2. 尽可能具体

IE

// 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