Reactjs 如何让react hot loader使用动态导入？

我看到了如何让react hot loader使用

import（）

语法，但在我的例子中，直到运行时我才知道文件名

以下是我得到的：

export default function(component, props, mountPoint) {

    function render() {
        import(`./containers/${component}`).then(({default: Component}) => {
            ReactDOM.render(
                <AppContainer>
                    <ErrorBoundary>
                        <Component {...props}/>
                    </ErrorBoundary>
                </AppContainer>, document.getElementById(mountPoint || 'react-root'));
        });
    }

    render();

    if(module.hot) {
        module.hot.accept('./containers', () => {
            render();
        });
    }

}

导出默认功能（组件、道具、挂载点）{
函数render（）{
导入（`./containers/${component}`）。然后（{default:component}）=>{
ReactDOM.render(
，document.getElementById（mountPoint | |'react root'）；
});
}
render（）；
如果（模块热）{
module.hot.accept（'./容器'，（）=>{
render（）；
});
}
}

第一次加载工作正常，只是

模块.hot

块不工作。Chrome告诉我：

未捕获（承诺中）错误：找不到模块“/containers”

我的终端告诉我同样的事情：

在./node_modules/babel loader/lib？{“cacheDirectory”：“/usr/local/myproject/cache/babel”，“forceEnv”：“development”}中出现警告/assets/scripts/app/react_loader.js 未找到模块：错误：无法解析“/usr/local/myproject/assets/scripts/app”中的“/containers”

如果我尝试接受

/containers/${component}

，则会出现运行时错误：

忽略对不可接受模块的更新。/assets/scripts/lib/components/bpm/MyClientProcessMenu.jsx->./assets/scripts/lib/components/bpm/MyClientProcessMenuLoader.jsx->./assets/scripts/app/containers/MyClientProcessMenuContainer.jsx->./assets/scripts/app/containers惰性递归^./.$->./节点\模块/babel加载程序/lib/index.js{“cacheDirectory”：“/usr/local/myproject/cache/babel”，“forceEnv”：“development”}./assets/scripts/app/react\u loader.js->./node\u modules/bundle loader/index.js./^./.$->./assets/scripts/lib/webpack.js->./assets/main.js->./0

并且没有更新发生

---

如何“接受”动态组件？

我认为，如果不复制代码，当前不支持此操作。作为一种解决方法，您可以创建两个文件，一个用于生产，一个用于动态导入，另一个用于开发，不使用动态导入

具有动态导入的文件必须仅包含在生产中。这就是将环境逻辑移动到不同文件（index.js）中的原因

index.js

// Neded because HMR doesn't work with dynamic import for languages
let app;
if (process.env.NODE_ENV === 'development') {
  app = require('./development').default;
} else {
  app = require('./production').default;
}
app(component);

client.js

export default function(Component) {

    function render() {
       ReactDOM.render(
         <AppContainer>
           <Component />
         </AppContainer>, document.getElementById('react-root'));
    }

    render();

    if(module.hot) {
        module.hot.accept('./containers', () => {
            render();
        });
    }
}

development.js

import client from './client';

export default function (component) {
  const Component = require(`./containers/${component}`);

  client(Component);
}

---

你能分享你的

.babelrc

和

webpack.config.js

吗？@Aaqib当然可以，这里：尝试安装

babel插件语法动态导入

，并把它交给

里面的插件数组。babelrc

@Aaqib我已经有了：请在

里面添加
react hot loader/babel
。babelrc

插件数组我没有认为我被允许接受

。/containers'

--我得到一个错误：“无法解决”。/containers'@mpen您到容器的路径正确吗？看起来只是路径有问题。是的，它是正确的。不要提及能够接受目录。是的，您必须为我指定主文件。如果（module.hot），它是带有路径

的布局文件{module.hot.accept（'modules/layout'，（）=>{const newLayout=require（'modules/layout'）。默认值；renderApp（newLayout）；}；}

layout:`{routes.map（route=>（}/>）}“``再加上一些布局我认为这与动态导入无关。在将动态导入引入代码之前，这真的有效吗？

import client from './client';

export default function (component) {
  const Component = require(`./containers/${component}`);

  client(Component);
}