看起来npm软件包的源代码Map有问题，webpack的source-map-loader模块无法处理它们，这并不影响应用程序本身，但是所有这些警告都很烦人。
我遇到了两个解决方案：要么强制源代码Map加载器跳过有问题的包，要么完全忽略源代码Map警告。
要实现这两种解决方案中的任何一种，都需要能够覆盖webpack.config.js，如何覆盖它实际上取决于运行React应用程序所使用的框架（我使用NX进行了设置）

溶液1：忽略源Map警告（最简单）

将ignoreWarnings: [/Failed to parse source map/]添加到您的webpack配置中。

const { merge } = require('webpack-merge');

module.exports = (config) => {
  return merge(config, {
    ignoreWarnings: [/Failed to parse source map/]
  });
};

您的webpack.config.js看起来与此有很大的不同，其思想是用它应该忽略的消息模式添加（或覆盖）ignoreWarnings。

溶液2：跳过问题包的源Map加载（Cleanest？）

const { merge } = require('webpack-merge');

module.exports = (config, context) => {
  return merge(config, {
    module: {
      rules: [
        {
          enforce: 'pre',
          test: /\.js$/,
          use: [
            {
              loader: 'source-map-loader',
              options: {
                filterSourceMappingUrl: (url, resourcePath) => {
                  // @zxing has issues with its source maps
                  if (/@zxing/i.test(resourcePath)) {
                    return false;
                  }

                  return true;
                }
              }
            }
          ]
        }
      ]
    }
  });
};

这里的想法是覆盖source-map-loader规则，如果当前资源与regex匹配，则跳过它的执行。在我的例子中，我希望跳过任何包含@zxing的资源。
我试过使用exclude选项，但是没有成功，我选择使用filterSourceMappingUrl。也许它对你有用。记住，路径必须是绝对的，所以你可能需要调整被排除的路径。More details here

const { merge } = require('webpack-merge');

module.exports = (config, context) => {
  return merge(config, {
    module: {
      rules: [
        {
          enforce: 'pre',
          test: /\.js$/,
          use: ['source-map-loader'],
          exclude:  ['/node_modules/@zxing']
        }
      ]
    }
  });
};

希望这个有用。
干杯。