H5W3
当前位置:H5W3 > 问答 > 正文

js异步import报错cannot find module xxx

console.log(0, import('../Pages/IndexPage'))


const withLoadable = (path) => {
    console.log(1, import(path))
    return Loadable({
        loader: () => {
            return import(path)
        },
        loading: Loading
    })
}
withLoadable('../Pages/IndexPage')

第一种方法可以拿到组件 第二种则不行

 

回答:

你是用webpack或其他打包工具开发的吧,如果纯粹使用es6进行开发应该是没有问题的。

webpack在开发阶段也会进行打包,而他内部自己实现了一套import。webpack在打包的时候会找到import进行依赖收集,你的代码中import(path)path是一个变量,并不指向具体的哪个路径,所以打包的时候找不到你下面传入的路径,你看给出的错误提示也应该能看出来:cannot find module xxx at xxx,这个main.chunk.js就是打包后的主文件。

详细的可以网上查下资料,webpack import() 动态加载模块踩坑 , 在vue中import()语法为什么不能传入变量?

感谢 改成loader: () => import(../Pages/${path}),果然好了

本文地址:H5W3 » js异步import报错cannot find module xxx