Cannot find module 'webpack/lib/TemplatedPathPlugin'

[beilo]

What happens?

我在集成 @dr.pogodin/babel-plugin-react-css-modules 这个babel插件的时候，编译会报错

fatal - Error: ERROR in ./src/.umi-production/umi.ts
Module build failed (from ./node_modules/.pnpm/registry.npmmirror.com+@umijs+bundler-webpack@4.0.52_typescript@4.9.5/node_modules/@umijs/bundler-webpack/compiled/babel-loader/index.js):
Error: [BABEL]: Cannot find module 'webpack/lib/TemplatedPathPlugin'

我在bundler-webpack代码中似乎没找到TemplatedPathPlugin。
https://github.com/umijs/umi/blob/master/packages/bundler-webpack/package.json

是预打包的webpack有什么没依赖进来吗？

这是我和库作者的对话
birdofpreyru/babel-plugin-react-css-modules#37

Mini Showcase Repository(REQUIRED)

How To Reproduce

pnpm build

Context

• Umi Version:
  "umi": "^4.0.52"
• Node Version:
  node -v v16.19.0
• Platform:
  mac

[fz6m]

看了一下，没找到很好的解决方案，因为这个 babel 插件用了深层导入 webpack 内部的东西：

// 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 没有公开这两个方法，同时 umi 不提供非公开方法的 webpack 导出，所以就找不到。

目前想到的一个比较 hack 的解决方法是：

  pnpm add -D webpack

// .umirc.ts

import path from 'path'

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()

// 在这行导入上面添加这个函数 ↑
const {
  getLocalIdent,
  generateScopedNameFactory,
} = require('@dr.pogodin/babel-plugin-react-css-modules/utils')

[beilo]

@fz6m 非常感谢！！！