[Bug] 目前不支持的第三方 webpack 导入方式问题

[fz6m]

说明

Version ：2024-05-19

若遇到使用 webpack 插件、babel 插件，报错找不到某个 webpack 模块问题，原因是因为：

1. 这些插件中，使用了 webpack 包中的某些深层的方法或类，如直接导入了 webpack/lib/TemplatedPathPlugin 。

2. umi 预打包了 webpack ，而预打包的 webpack 中没包含到要深层导入的类。

目前可以尝试的几种解决方法

方法一：延后导入法

将导入时机从 import 最早改为 chainWebpack 内 require ，尝试看看会不会还报错，因为 import 的时机太早了，在太早的时机可能 umi 还没有 hook 到 webpack 的导入。

// .umirc.ts
-  import { GenerateSW } from "workbox-webpack-plugin";

// ...

  chainWebpack() {
+   const { GenerateSW } = require("workbox-webpack-plugin");    
  }

方法二：提出 issue ，等待 PR 修复

附带最小复现，提出你报错的 issue ，排查找到是哪些找不到后，把这些内容添加到 umi 的 webpack hook 列表即可。

方法三：手动 hook 找不到的导入

先安装 webpack ：

  pnpm add -D webpack

在配置文件最上面添加如下代码片段：

// .umirc.ts

function webpackDeepPathImportWorkaround() {
  const webpackPath = path.join(__dirname, './node_modules/webpack/lib')
  const mod = require('module')
  const resolveFilename = mod._resolveFilename
  const hookPropertyMap = new Map()
  hookPropertyMap.set(
    'webpack/lib/TemplatedPathPlugin',
    path.join(webpackPath, './TemplatedPathPlugin.js')
  )
  hookPropertyMap.set(
    'webpack/lib/util/createHash',
    path.join(webpackPath, './util/createHash.js')
  )
  mod._resolveFilename = function (
    request: string,
    parent: any,
    isMain: boolean,
    options: any
  ) {
    const hookResolved = hookPropertyMap.get(request)
    if (hookResolved) request = hookResolved
    return resolveFilename.call(mod, request, parent, isMain, options)
  }
}
webpackDeepPathImportWorkaround()

以上代码片段可以人为去 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 中：

// .umirc.ts
-  import { GenerateSW } from "workbox-webpack-plugin";

// ...

  chainWebpack() {
+   const { GenerateSW } = require("workbox-webpack-plugin");    
  }

或者手动安装一个 webpack ，让他能找到 webpack 实例：

  pnpm add -D webpack

理想的预期情况是该插件支持传入 webpack 实例的实现，但涉及到插件内改造推进困难。

深层的 webpack 路径导入

反馈来自于：#10565 、#10712

比如 babel 插件中使用了 webpack 的非公开方法，比如 babel-plugin-react-css-modules 插件使用了：

// https://github.com/birdofpreyru/babel-plugin-react-css-modules/blob/master/src/getLocalIdent.js

import TemplatedPathPlugin from 'webpack/lib/TemplatedPathPlugin';
import createHash from 'webpack/lib/util/createHash';

这两个深层路径方法都不是 webpack 公开方法（指无法通过 webpack.xxx 使用），在 umi 4 中也无法通过 deepimport.json 的方式 hook 他的导入，因为预打包的产物是 index.js ，没有路径，我们也没有办法从公开方法上取到他。

解决方法

目前一种很 hack 的解决方法是用户自己 hook 需要的 webpack 深层路径导入：

  pnpm add -D webpack

// .umirc.ts

function webpackDeepPathImportWorkaround() {
  const webpackPath = path.join(__dirname, './node_modules/webpack/lib')
  const mod = require('module')
  const resolveFilename = mod._resolveFilename
  const hookPropertyMap = new Map()
  hookPropertyMap.set(
    'webpack/lib/TemplatedPathPlugin',
    path.join(webpackPath, './TemplatedPathPlugin.js')
  )
  hookPropertyMap.set(
    'webpack/lib/util/createHash',
    path.join(webpackPath, './util/createHash.js')
  )
  mod._resolveFilename = function (
    request: string,
    parent: any,
    isMain: boolean,
    options: any
  ) {
    const hookResolved = hookPropertyMap.get(request)
    if (hookResolved) request = hookResolved
    return resolveFilename.call(mod, request, parent, isMain, options)
  }
}
webpackDeepPathImportWorkaround()

这种方式需要提前获知使用的插件有哪些深层的 webpack 导入，成本较高。

[xierenyuan]

多安装一个 webpack 会不会有多实列的问题 我记得 webpack 有多实列出错的问题
深层的webpack 引入感觉遇到一类就加一类吧 -.- 上一次就加了好几个

[fz6m]

多安装一个 webpack 会不会有多实列的问题 我记得 webpack 有多实列出错的问题 深层的webpack 引入感觉遇到一类就加一类吧 -.- 上一次就加了好几个

在这个用例里面是没问题的，主要是 webpack 没公开这个类，稍微是有些 “非常规” 的用法的，如果是公开方法，加上没问题的。

[yq756530939]

I tried all the methods above，but the problem still exists。Switch webpack version to 4.44.x，No template for dependency: ConstDependency

[fz6m]

umi 4 不支持 webpack 4 。

[fz6m]

此问题已有多个解决方法，遇到问题选其一尝试即可，故关闭 issue 。