[英]Uncaught Error: Cannot Find Module When Using Dynamic Import for JavaScript
I'm using Create-React-App and am looking to use the dynamic import() supported by webpack 2.0 to import a module based on a variable string. 我正在使用Create-React-App,我希望使用webpack 2.0支持的动态import()来导入基于变量字符串的模块。
I've looked at the official proposal ( https://github.com/tc39/proposal-dynamic-import ) and it seems possible to do something like this: 我查看了官方提案( https://github.com/tc39/proposal-dynamic-import ),似乎可以这样做:
import(`./language-packs/${navigator.language}.js`)
But it breaks when I try something similar. 但是当我尝试类似的东西时,它会破裂。
AppRoutes.js AppRoutes.js
import LazyLoad from 'services/LazyLoad';
export class AppRoutes extends React.Component {
render() {
return (
<Switch>
<Route
exact path="/"
render={(matchProps) => (
<LazyLoad
absoluteModulePath='pages/default/HomePage'
getComponent={() => import('pages/default/HomePage')}
{...matchProps}
/>
)}
/>
</Switch>
);
}
}
export default AppRoutes;
pages/default/HomePage/index.js 页/默认/首页/ index.js
import React from 'react';
export const HomePage = () => {
return (
<div>
I'm the default HomePage
</div>
);
}
export default HomePage;
BROKEN services/LazyLoad/index.js BROKEN 服务/ LazyLoad / index.js
import React from 'react';
export class LazyLoad extends React.Component {
...
componentDidMount() {
import(this.props.absoluteModulePath) // Critical dependency: the request of a dependency is an expression
.then(module => module.default)
.then(AsyncModule => this.setState({AsyncModule}))
}
...
}
export default LazyLoad;
Error: 错误:
But when I change the LazyLoader to 但是当我将LazyLoader更改为
WORKING services/LazyLoad/index.js 工作 服务/ LazyLoad / index.js
import React from 'react';
export class LazyLoad extends React.Component {
...
componentDidMount() {
this.props.getComponent()
.then(module => module.default)
.then(AsyncModule => this.setState({AsyncModule}))
}
...
}
export default LazyLoad;
it works. 有用。
The absolute paths is something built into create-react-app with the help of environment variables. 绝对路径是在环境变量的帮助下内置到create-react-app中的东西。
.env .ENV
NODE_PATH=src/
I require dynamically loading modules this way to build a proof of concept for multi-tenancy. 我需要以这种方式动态加载模块,以构建多租户的概念证明。 How can I fix the broken LazyLoad such that I can pass a string as a prop and have the LazyLoad component dynamically load the component from that string prop?
如何修复损坏的LazyLoad,以便我可以将字符串作为prop传递并让LazyLoad组件从该字符串prop中动态加载组件?
Only partially dynamic statement are allowed for import(). import()只允许部分动态语句。
In your AppRoutes.js you could do this: 在你的AppRoutes.js中你可以这样做:
...
<LazyLoad
modulePath='HomePage'
getComponent={() => import('pages/default/HomePage')}
{...matchProps}
/>
then in your LazyLoad Component you do: 然后在你的LazyLoad组件中你做:
componentDidMount() {
import(`pages/default/${this.props.modulePath}/index.js`)
.then(module => module.default)
.then(AsyncModule => this.setState({AsyncModule}))
}
Fully dynamic statements, such as import(foo), will fail because webpack requires at least some file location information.The import() must contain at least some information about where the module is located, so bundling can be limited to a specific directory or set of files.
完全动态的语句(例如import(foo))将失败,因为webpack至少需要一些文件位置信息.import()必须至少包含有关模块所在位置的一些信息,因此捆绑可以限制在特定目录或一组文件。
https://webpack.js.org/api/module-methods/#import- https://webpack.js.org/api/module-methods/#import-
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.