-
Notifications
You must be signed in to change notification settings - Fork 2.7k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[Bug] 目前不支持的第三方 webpack 导入方式问题 #10583
Comments
多安装一个 webpack 会不会有多实列的问题 我记得 webpack 有多实列出错的问题 |
在这个用例里面是没问题的,主要是 webpack 没公开这个类,稍微是有些 “非常规” 的用法的,如果是公开方法,加上没问题的。 |
I tried all the methods above,but the problem still exists。Switch webpack version to 4.44.x, |
umi 4 不支持 webpack 4 。 |
此问题已有多个解决方法,遇到问题选其一尝试即可,故关闭 issue 。 |
说明
若遇到使用 webpack 插件、babel 插件,报错找不到某个 webpack 模块问题,原因是因为:
这些插件中,使用了 webpack 包中的某些深层的方法或类,如直接导入了
webpack/lib/TemplatedPathPlugin
。umi 预打包了 webpack ,而预打包的 webpack 中没包含到要深层导入的类。
目前可以尝试的几种解决方法
方法一:延后导入法
将导入时机从 import 最早改为
chainWebpack
内require
,尝试看看会不会还报错,因为import
的时机太早了,在太早的时机可能 umi 还没有 hook 到 webpack 的导入。方法二:提出 issue ,等待 PR 修复
附带最小复现,提出你报错的 issue ,排查找到是哪些找不到后,把这些内容添加到 umi 的 webpack hook 列表即可。
方法三:手动 hook 找不到的导入
先安装 webpack :
在配置文件最上面添加如下代码片段:
以上代码片段可以人为去 hook 那些找不到的 webpack 变量,需要自己去调查下使用的包里用到了哪些 webpack 的深层导入。
注:此种方法并不是完美的。比如涉及到大量的深层导入,可能要写一个工具去扫描都有哪些导入抽取出来;比如涉及到 webpack module 相关的 class ,如果插件通过导入 webpack module 类来新增代码块,由于自己安装的 webpack 和真正运行的 webpack 不是一个,所以也会导致新增的 module 代码块生成失败,最终解决方案还是
方法 2 :提交 issue 通过添加找不到的导入到 umi 仓库内解决
。以下内容已过时(截止
2024-05-19
),展开查看问题
目前 umi 4 不支持以下两种与 webpack 有关的导入。
使用的 webpack 插件中导入了 webpack
如果 webpack 插件使用了 webpack 实例,比如
require('webpack')
导入,此时是找不到的,因为解析配置文件的时机还没有 hook webpack 导入,在 pnpm 的严格隔离机制下,无法找到 webpack 。反馈来自于:#10289 (插件
workbox-webpack-plugin
中导入了 webpack 但找不到报错)解决方法
可以手动延缓该插件的导入时机,比如不在配置文件顶层导入而是放到
chainWebpack
中:或者手动安装一个 webpack ,让他能找到 webpack 实例:
理想的预期情况是该插件支持传入 webpack 实例的实现,但涉及到插件内改造推进困难。
深层的 webpack 路径导入
反馈来自于:#10565 、#10712
比如 babel 插件中使用了 webpack 的非公开方法,比如
babel-plugin-react-css-modules
插件使用了:这两个深层路径方法都不是 webpack 公开方法(指无法通过
webpack.xxx
使用),在 umi 4 中也无法通过deepimport.json
的方式 hook 他的导入,因为预打包的产物是index.js
,没有路径,我们也没有办法从公开方法上取到他。解决方法
目前一种很 hack 的解决方法是用户自己 hook 需要的 webpack 深层路径导入:
这种方式需要提前获知使用的插件有哪些深层的 webpack 导入,成本较高。
The text was updated successfully, but these errors were encountered: