Webpack giving an error when hot-reloading my react app

user_1908025 0
Viewed 355

When I make a change to my react-app, and it tries to reload, I get the following error:

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

TypeError: changes.concat is not a function

I then have to restart my react app in order for the changes to be reflected.

This started when we did a bunch of fiddling with versions of different packages, so I suspect that there's some combination of packages that webpack is not happy with, but I don't know which ones, or how to figure that out.

Just in case it's relevant, though I don't think it is, here's the webpack section of my craco.config.js:

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

webpack reactjs
2 Answers

Webpack and Watchpack Versions

The error seems to be in reference to v4 of webpack (or earlier). This function was reworked in v5 of webpack, where it now no longer assumes changes is an array (it's now an iterable that is only iterated if inputFileSystem.purge is defined).

From the resolution section of package.json, it looks like you're resolving watchpack to version 2.2.0. From the v2 release notes, it looks like it changed its API to now pass sets instead of arrays to watcher.once("aggregated", (changes, removals) => {...}), breaking v4 of webpack.

Updating to version 5 of webpack may solve this particular issue (though you may need to upgrade other packages that depend on webpack v4, like webpack-cli). Alternatively, downgrading watchpack to before version 2 (like version 1.7.5) might also work, though this may also introduce new issues.

user_61849720

Please check your array before performing the concat operation. You can also use the Array.from() method before using concat. For example,

const arr1 = ['a', 'b'];
const arr2=['d', 'c'];
const arr3 = Array.isArray(arr1) ? arr1.concat(arr2) : []; //check if arr1 is a array
const arr4=Array.from(arr1).concat(arr2); //use type conversion.

Try the above methods in the node modules folder of where the error is from.

user_183909260
Related