Search code examples
node.jsangularwebpackwarningsdeprecation-warning

WEBPACK deprecation array to set warning in angular 11 using web pack 5

I migrated my app from angular 10 to 11, and updated to webpack 5 using :

      "resolutions": {
        "webpack": "^5.0.0"
      }

When I ng build/serve I got the following warning =

(node:3926) [DEP_WEBPACK_DEPRECATION_ARRAY_TO_SET_INDEXER] DeprecationWarning: chunk.files was changed from Array to Set (indexing Array is deprecated)
(Use `node --trace-deprecation ...` to show where the warning was created)

Any idea of what should I do? replace all Array by Set? and where can I put this node --trace-deprecation in my app in order to know what file cause this problem?

Thank you.

UPDATE

I added --trace-deprecation during build and got the following logs :

(node:12987) [DEP_WEBPACK_DEPRECATION_ARRAY_TO_SET_INDEXER] DeprecationWarning: chunk.files was changed from Array to Set (indexing Array is deprecated)
    at Set.fn (/Users/xxxxx/node_modules/webpack/lib/util/deprecation.js:128:4)
    at xxx/node_modules/@angular-devkit/build-angular/src/webpack/plugins/analytics.js:173:57
    at Array.forEach (<anonymous>)
    at NgBuildAnalyticsPlugin._collectBundleStats (/xxxx/node_modules/@angular-devkit/build-angular/src/webpack/plugins/analytics.js:172:14)
    at NgBuildAnalyticsPlugin._done (/xxx/node_modules/@angular-devkit/build-angular/src/webpack/plugins/analytics.js:242:14)
    at Hook.eval [as callAsync] (eval at create (/xxx/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:14:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/xxx/node_modules/tapable/lib/Hook.js:18:14)
    at /xxx/node_modules/webpack/lib/Compiler.js:468:23
    at Compiler.emitRecords (/xxx/node_modules/webpack/lib/Compiler.js:846:39)
    at /xxx/node_modules/webpack/lib/Compiler.js:460:11
Solution

  • Currently, Angular 11 with Webpack 5 is still experimental and work with Yarn only as mentioned here. So you may see some warning and errors here and there. I believe it is better to avoid production builds with it for now.

    Most probably that it will be offically supported by Angular 12. You can see here that @angular-devkit/build-optimizer library will be supporting Webpack 5 in version 12.