升级 Angular 后，webpack 模块 source-map-loader 抛出“this.getOptions is not a function”

Question

我目前正在通过webpack 和source-map-loader 构建我的角度项目以提取源地图，如下所示：

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.js$/,
        enforce: "pre",
        use: ["source-map-loader"],
      },
    ],
  },
};

这适用于我的 Angular 11 版本。 将 Angular 包升级到 Angular 12 后，我开始收到以下错误：

Module build failed (from ./node_modules/source-map-loader/dist/cjs.js):
TypeError: this.getOptions is not a function
    at Object.loader (./node_modules/source-map-loader/dist/index.js:21:24)

从我的 webpack 模块中删除此部分可以使构建成功，但我不再提取源映射，导致我的包大小增加。

我已尝试将 source-map-loader 升级到最新版本，但没有更改错误。 我已经深入研究了 node_module，它抱怨这部分代码：

async function loader(input, inputMap) {
  const options = this.getOptions(_options.default);

我在这里看到了关于 Vue 的 sass-loader 和其他样式加载器的其他问题，但这是针对 Angular 的，并且对提取源映射很生气。

有一些 breaking changes 转到 Angular 12 但升级到 webpack 5.0.0 似乎没有什么不同

我还能做些什么来调试它？

Answer 1

通过查看源代码 v1.1.3 我们确实看到了

import { getOptions } from "loader-utils";

但是在v2.0甚至v3.0之后，这个导入被删除了。

它来自图​​书馆loader-utils

从 v2.0 开始，package.json 不再导入它。

看起来它已被弃用，getOptions 应从 Webpack 类型中使用，而不是 loader-utils。

也许您的错误来自与您的 node_modules 中的旧依赖项的冲突，您应该从目录中删除旧依赖项并重试

rm -rf node_modules/@types/loader-utils
rm -rf node_modules/loader-utils