feat: DeprecationWarning: Chunk.modules in Webpack 3.x

[tleunen]

Webpack 3.0-rc was released and this plugin currently doesn't support it.

I haven't tested it, it might be just a question of updating the peerDependency.

[michael-ciniawsky]

It doesn't work at all or does it just displays a warning for an unmet peerDepedency?

[gpoitch]

It's working with webpack 3.0. It does emit this warning however:

DeprecationWarning: Chunk.modules is deprecated. Use Chunk.getNumberOfModules/mapModules/forEachModule/containsModule instead.
    at /node_modules/extract-text-webpack-plugin/index.js:271:24

[MirrorBytes]

Change line 271 to this:
async.forEach(Array.from(chunk.mapModules(function(c) { return c; })), function(module, callback) {

It solved the issue for me (ran 3 tests, might need a bit more testing). The Array.from() is specifically to counter an issue I have had in the past with several linux distros not liking "array-like" structures (such as arrays built from mapping).

[MirrorBytes]

@d3viant0ne Should a put a pull request in? It's not exactly urgent, but this is the most resource independent way to avoid this warning and making it work more effectively for Webpack 3.

[michael-ciniawsky]

Yes feel free to send PR :) for discussion && finishing details

[joshwiens]

Everyone - The change throwing the deprecation warning looks like it isn't going to be backwards compatible with 2.x ( need to verify this, i'm just looking at code atm ).

This is going to have to go out as a semver: Major which means everyone is going to have to live with the deprecation warning for a bit. I've put this in the 3.0.0 milestone

[joshwiens]

The Array.from() is specifically to counter an issue I have had in the past with several linux distros not liking "array-like" structures (such as arrays built from mapping)

@MirrorBytes I remember this being an older NodeJS issue that cropped up in Fedora for me iirc. It's also something I haven't seen in quite a while and don't believe it to be a relevant issue for our supported engines: 4.3.0 < 5.0.0 || >= 5.10 range.

If you know of an instance where that isn't the case, I'll configure the applicable vm to verify the need for Array.from()

[joshwiens]

@MirrorBytes - If you want to PR in the changes for the deprecation warnings, you need to fork off of & target this branch .... https://github.com/webpack-contrib/extract-text-webpack-plugin/tree/feature/webpack3

[MirrorBytes]

Sorry for the delay. I removed Array.from() and submitted a pull request for Webpack-3 branch.

[irowbin]

Well i am having the same issue here.

(node:4692) DeprecationWarning: Chunk.modules is deprecated. Use Chunk.getNumber OfModules/mapModules/forEachModule/containsModule instead

The package.json file

{
  "name": "app",
  "version": "1.0.0",
  "description": "app",
  "scripts": {
    "start": "webpack-dev-server --hot --inline --progress --colors  --port 2000"
  },
  "license": "MIT",
  "dependencies": {
    "@angular/animations": "~4.2.4",
    "@angular/common": "~4.2.4",
    "@angular/compiler": "~4.2.4",
    "@angular/core": "~4.2.4",
    "@angular/forms": "~4.2.4",
    "@angular/http": "~4.2.4",
    "@angular/material": "~2.0.0-beta.7",
    "@angular/platform-browser": "~4.2.4",
    "@angular/platform-browser-dynamic": "~4.2.4",
    "@angular/router": "~4.2.4",
    "core-js": "~2.4.1",
    "rxjs": "~5.4.1",
    "zone.js": "~0.8.12"
  },
  "devDependencies": {
    "@angular/compiler-cli": "~4.2.4",
    "@angular/platform-server": "~4.2.4",
    "@ngtools/webpack": "~1.4.1",
    "@types/jquery": "^2.0.43",
    "@types/node": "~8.0.0",
    "@types/typeahead": "~0.11.29",
    "angular2-router-loader": "~0.3.5",
    "angular2-template-loader": "~0.6.2",
    "awesome-typescript-loader": "~3.1.3",
    "chunk-manifest-webpack2-plugin": "~1.0.1",
    "compression-webpack-plugin": "~0.4.0",
    "css-loader": "~0.14.0",
    "extract-text-webpack-plugin": "^3.0.0-beta.3",
    "file-loader": "~0.11.2",
    "html-loader": "~0.4.5",
    "html-webpack-plugin": "~2.28.0",
    "imports-loader": "^0.7.1",
    "moment": "^2.18.1",
    "null-loader": "~0.1.1",
    "raw-loader": "~0.5.1",
    "rimraf": "~2.6.1",
    "style-loader": "~0.18.2",
    "tslint": "~5.4.3",
    "typescript": "~2.3.4",
    "uglify-js": "^3.0.19",
    "uglify-loader": "~2.0.0",
    "uglifyjs-webpack-plugin": "^0.4.6",
    "webpack": "~3.0.0",
    "webpack-bundle-analyzer": "~2.8.2",
    "webpack-chunk-hash": "~0.4.0",
    "webpack-dev-server": "~2.5.0",
    "webpack-merge": "~4.1.0",
    "webpack-uglify-parallel": "~0.1.3"
  }
}

ran this cmd webpack-dev-server --hot --inline --progress --colors --port 2000

and i got this
says compiled successfully with warning but when i run the app, the error appeared.

[hdfs010]

(node:19215) DeprecationWarning: Chunk.modules is deprecated. Use Chunk.getNumberOfModules/mapModules/forEachModule/containsModule instead.

just to modify

node_modules/_extract-text-webpack-plugin@2.1.2@extract-text-webpack-plugin/index.js:
34 } else if(checkedChunks.indexOf(chunk) < 0) {
35 checkedChunks.push(chunk);
36: chunk.modules.slice().forEach(function(module) {
37 intoChunk.addModule(module);
38 module.addChunk(intoChunk);

[joshwiens]

This is a known issue & already has a PR to resolve it. It's a Major so you will have to use the etwp 3.x major release.

See #540 for the particulars

[joshwiens]

Closed by be7936d

[irowbin]

Well, thanks @d3viant0ne & @michael-ciniawsky The warning is gone and app works just fine.

[ova2]

@d3viant0ne I still have the warning

"DeprecationWarning: Chunk.modules is deprecated. Use Chunk.getNumberOfModules/mapModules/forEachModule/containsModule instead."

My package.json: https://github.com/ova2/angular-development-with-primeng/blob/master/angular-primeng-seed-for-authors/package.json

Simple try to execute npm run start:prod

[irowbin]

@ova2 Please update to latest webpack v3.2.0 & extract-text-webpack-plugin v3.0 before updates, Clean old dependency from global and project.

[ova2]

@irowbin I already have webpack v3.2.0 & extract-text-webpack-plugin v3.0 and no old deps. The warning is still here. See this comment as well: #561 (comment) There is still one (or more?) place(s) in the plugin which are not fixed yet.

[irowbin]

@ova2 Its wired that author himself having this deprecation warning 🤣 . Mine works fine after i did some cleanup and re-install. I was seeing this error till the beta stage but not after rc

node
v6.11.0

npm
v5.2.0

webpack
v3.2.0

extract-text-webpack-plugin
v3.0

[Igor-Vuk]

I updated to webpack 3.2.0 and extract-text-webpack-plugin 3.0.0 deleted and installed node_modules again and I still get this warning.

[cebor]

Cannot reproduce this, all works fine with 3.0.0.

Try to clear caches.

yarn cache clean
# or
npm cache clean --force

[Igor-Vuk]

Tried it . Unfortunately I am sill getting the message.

[weaverryan]

FYI - if you use webpack-chunk-hash (or webpack-md5-hash), the deprecation warning may be coming from it: alexindigo/webpack-chunk-hash#9

[michael-ciniawsky]

@Igor-Vuk @ova2 Could you both please share your webpack.config.js ? After some debugging I'm 99,9% sure the DeprecationWarning isn't coming from extract-text-webpack-plugin, in case you only get the useless (node: 1234) DeprectationWarning: Chunk.modules is deprecated ... message use this to get a stackTrace

WarningsPlugin.js

class WarningsPlugin {
  constructor (options = {}) {
    this.options = options
  }

  apply(compiler) {
    compiler.plugin('this-compilation', (compilation, cb) => {
      process.on('warning', (warning) => {
        console.warn('\n⚠️  Warnings Plugin\n\n')
        console.warn(`${warning.name}\n`)
        console.warn(`${warning.message}\n`)
        console.warn(`${warning.stack)\n`)
      });
    })
  }
}

Before

(node:14759) DeprecationWarning: Chunk.modules is deprecated. 
Use Chunk.getNumberOfModules/mapModules/forEachModule/containsModule instead.

After

⚠️ Warnings Plugin


DeprecationWarning

Chunk.modules is deprecated. Use Chunk.getNumberOfModules/mapModules/forEachModule/containsModule instead.

    at NamedChunksPlugin.env.production.NamedChunksPlugin [as nameResolver] (.../.webpack/plugins.js:17:19)
    at chunks.forEach (.../node_modules/webpack/lib/NamedChunksPlugin.js:22:23)
    at Array.forEach (native)
    at Compilation.compilation.plugin (.../node_modules/webpack/lib/NamedChunksPlugin.js:20:12)
    at Compilation.applyPlugins1 (.../node_modules/tapable/lib/Tapable.js:75:14)
    at sealPart2 (.../node_modules/webpack/lib/Compilation.js:606:9)
    at Compilation.applyPluginsAsyncSeries (.../node_modules/tapable/lib/Tapable.js:131:46)
    at Compilation.seal (.../node_modules/webpack/lib/Compilation.js:579:8)
    at applyPluginsParallel.err (.../node_modules/webpack/lib/Compiler.js:514:17)
    at .../node_modules/tapable/lib/Tapable.js:225:11
    at _addModuleChain (.../node_modules/webpack/lib/Compilation.js:481:11)
    at processModuleDependencies.err (.../node_modules/webpack/lib/Compilation.js:452:13)
    at _combinedTickCallback (internal/process/next_tick.js:95:7)
    at process._tickCallback (internal/process/next_tick.js:161:9)

[ova2]

@weaverryan Thanks a lot! The warning came from webpack-md5-hash. I've removed this plugin and the warning is gone. No issues more.

[Igor-Vuk]

@weaverryan @michael-ciniawsky @ova2
Yes. My warning was also comming from webpack-md5-hash. After uninstall it is ok. Does anyone have solution how to continue use it? We should probaby open an issue on webpack-md5-hash site.

[ova2]

@Igor-Vuk I don't know why I was using it. I've realized I can live without this plugin - the Webpack generated hashes are fine.

[Igor-Vuk]

@ova2
Mine our not, for example vendor chunkhash changes when I make a new build even though just a bundle hash should change. With md5 is ok.

[ova2]

@Igor-Vuk I use manifest and manifest.js file + Webpack records

// See https://medium.com/webpack/harnessing-the-power-of-webpack-2cd0e20ff1bf#.q9do1u54o
recordsPath: path.join(ROOT, 'config', 'webpack-records.json')

The hash of polyfill is fine after rebuild (I don't have a vendor file because it is merged together with main file due to better tree shaking).

[michael-ciniawsky]

https://medium.com/webpack/predictable-long-term-caching-with-webpack-d3eee1d3fa31

const { NamedChunksPlugin, NamedModulesPlugin } = require('webpack')
...
[
    new NamedModulesPlugin(),
    new NamedChunksPlugin((chunk) => {
      if (chunk.name) return chunk.name

      return chunk
-       .modules.map(({ context, request }) => path.relative(context, request)
+       .mapModules(({ context, request }) => path.relative(context, request)) // <= webpack >= 3
        .join('_')
    }),
    new CommonsChunkPlugin({
      name: [ 'vendor', 'runtime' ],
      minChunks: Infinity
    }),
    ...ExtractTextPlugin, ModuleConcatenationPlugin
]

Third-party Plugins are not needed most of the time imho :)

[joshwiens]

I personally use md5-hash but I have a rather complex nginx setup related to what is & is not cached and for how long.

Outside of situations where your operational requirements warrant the added complexity, @michael-ciniawsky is right, you really don't need it.

[ayepRahman]

guys how do you find and remove webpack-md5-hash in my webpack

[joshwiens]

@ayepRahman - Should be listed in your project devDependencies. If you don't see it there, it's a dependency of a dependency.

That said, if you are using someone's boilerplate project, removing that lib is likely going to break your production build.

[marianocodes]

I'm still getting the warning.

"webpack": "^3.4.1",
"extract-text-webpack-plugin": "^3.0.0"

[joshwiens]

This is not from extract-text-webpack-plugin

[oguzhanabali]

I'm still getting the warning.

[joshwiens]

@oguzhanabali Read the comment directly above yours. The warning will be emitted by any plugin using the now deprecated Chunk.modules when trying to upgrade to [email protected]