How to fix deprecation warning for Chunk.modulesIterable?

Question

I am the maintainer of external-svg-sprite-loader and I noticed that when using it with webpack 5 I get the following warning:

[DEP_WEBPACK_CHUNK_MODULES_ITERABLE] DeprecationWarning: Chunk.modulesIterable: Use new ChunkGraph API

The build passes but I would like to able to fix this deprecation warning. However, I can't find any documentation about modulesIterable or the ChunkGraph API. Where should I look for it and what would be a potential solution for this issue?

Answer 1

I had this issue because I was using compilation.hooks.optimizeChunks to iterate through all modules in the compilation. After some research, I found that I could use compilation.hooks.optimizeModules to achieve the same result. Therefore, I switched to the latter and stopped getting the deprecation warning mentioned in my question. I would say that this is a better solution than iterating through the modules in a chunk since webpack seems to already be doing that internally anyway.

Answer 2

external-svg-sprite-loader is using Chunk.modulesIterable (ref) which is now deprecated and is being replaced with ChunkGraph

The package has a peer dependency of webpack^4.1.0 (ref), so you can either downgrade your Webpack to 4.* to remove the warning or ask the package maintainer to add support for Webpack 5.

You can find the official deprecation note here

Answer 3

If you want to iterate through modules in chunk, you could do it like this:

compilation.chunks.forEach(chunk => {
  compilation.chunkGraph.getChunkModules(chunk).forEach((module) => {
    // module is available here
  })
});

You could find other useful methods of this class in its source code. If you want to manipulate modules in chunk, probably it's better to use ModuleGraph class. For example:

compilation.chunks.forEach(chunk => {
  compilation.chunkGraph.getChunkModules(chunk).forEach((module) => {
    const exportInfo = compilation.chunkGraph.moduleGraph.getExportInfo(module);
  })
});