reactjs - Webpack 在热重载我的 React 应用程序时出错

Question

当我对我的 react-app 进行更改并尝试重新加载时，我收到以下错误:

/path/to/app/node_modules/webpack/lib/node/NodeWatchFileSystem.js:50
                    changes = changes.concat(removals);
                                      ^

TypeError: changes.concat is not a function

然后我必须重新启动我的 React 应用程序才能反射(reflect)更改。

这开始于我们对不同包的版本做了一堆摆弄，所以我怀疑 webpack 不满意某些包的组合，但我不知道是哪些，也不知道如何解决。

以防万一它是相关的，尽管我不认为它是相关的，这是我的 craco.config.js 的 webpack 部分:

webpack: {
    plugins: [
      new DefinePlugin({
        BRAND_NAME: '"My app"'
      })
    ],
    configure: webpackConfig => {
      const instanceOfMiniCssExtractPlugin = webpackConfig.plugins.find(
        plugin => plugin instanceof MiniCssExtractPlugin
      );

      if (instanceOfMiniCssExtractPlugin)
        instanceOfMiniCssExtractPlugin.options.ignoreOrder = true;

      return webpackConfig;
    }
  }

Package.json link

Answer 1

Webpack 和 Watchpack 版本

错误似乎与 v4 of webpack (or earlier) 有关.此功能已在 v5 of webpack 中重新设计，它现在不再假定 changes 是一个数组(它现在是一个可迭代对象，只有在定义了 inputFileSystem.purge 时才会迭代)。

从 package.json 的解析部分，您似乎正在将 watchpack 解析为版本 2.2.0。来自v2 release notes ，看起来它改变了它的 API 现在将集合而不是数组传递给 watcher.once("aggregated", (changes, removals) => {...})，打破了 webpack 的 v4。

更新到 webpack 版本 5 可能会解决这个特定问题(尽管您可能需要升级依赖于 webpack v4 的其他包，例如 webpack-cli)。或者，将 watchpack 降级到版本 2 之前(如 version 1.7.5 )也可能有效，尽管这也可能会引入新问题。