首页 文章

如何让react-hot-loader与动态导入一起工作？

提问于
浏览 次
3

我看到了this answer，它显示了如何让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();
        });
    }

}

第一个加载工作正常，它只是 module.hot 块不起作用 . Chrome告诉我：

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

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

警告在./node_modules/babel-loader/lib?{"cacheDirectory":"/usr/local/myproject/cache/babel","forceEnv":"development"}!./assets/scripts/app/react_loader . 找不到模块：错误：无法解析'/ 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 lazy recursive ^ . / . $ - > ./node_modules/babel-loader/lib/index.js?{"cacheDirectory":"/usr/local/myproject /cache/babel","forceEnv":"development"}!./assets/scripts/app/react_loader.js - > ./node_modules/bundle-loader/index.js!./assets/scripts/app/react_loader . js - > ./assets/scripts/app recursive ./node_modules/bundle-loader/index.js！ . / ^ . / . $ - > ./assets/scripts/lib/webpack.js - > ./assets/main .js - > 0

并且没有更新 .

我如何“接受”动态组件？

reactjs webpack react-hot-loader

1 回答

  • 1

    我不认为这是当前支持而不重复代码 . 作为一种变通方法，您可以创建两个文件，一个用于动态导入 生产环境 ，第二个文件没有动态导入进行开发 .

    具有动态导入的文件必须仅包含在 生产环境 中 . 这就是将环境逻辑移动到不同文件（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();
        });
    }
}

    production.js

    import client from './client';


export default function (component) {
  import(`./containers/${component}`).then(Component => {
    client(Component)
  });
}

    development.js

    import client from './client';

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

  client(Component);
}
    回复于

相关问题