Skip to content

[Angular 12] The 'compilation' argument must be an instance of Compilation (Webpack 5) / webpack_1.util.cleverMerge is not a function (Webpack 4) #20786

Closed
@buu700

Description

@buu700

Bug Report

Affected Package

Seems like an issue with @angular-devkit/build-angular and/or @ngtools/webpack and/or @angular/compiler-cli?

Is this a regression?

Yes, the behavior was not reproducible with Angular 11 and webpack 4.

Description

Attempting to build (ng build --aot true --common-chunk false --source-map false --vendor-chunk false) fails with the error below.

Minimal Reproduction

I can investigate further and try to put something together if needed, but our project code is at least available at https://github.com/cyph/cyph/tree/angular-42087-test.

Exception or Error

Angular 12 with Webpack 5:

⠋ Generating browser application bundles...Warning: Entry point 'devextreme-angular/ui/file-manager' contains deep imports into '/cyph/cyph.app/node_modules/devextreme/ui/file_manager', '/cyph/cyph.app/node_modules/devextreme/bundles/dx.all'. This is probably not a problem, but may cause the compilation of entry points to be out of order.
Warning: Entry point 'angular2-text-mask' contains deep imports into '/cyph/cyph.app/node_modules/text-mask-core/dist/textMaskCore'. This is probably not a problem, but may cause the compilation of entry points to be out of order.
Warning: Entry point 'devextreme-angular/core' contains deep imports into '/cyph/cyph.app/node_modules/devextreme/core/utils/common', '/cyph/cyph.app/node_modules/devextreme/core/dom_adapter', '/cyph/cyph.app/node_modules/devextreme/events', '/cyph/cyph.app/node_modules/devextreme/core/renderer', '/cyph/cyph.app/node_modules/devextreme/core/http_request', '/cyph/cyph.app/node_modules/devextreme/core/utils/ready_callbacks', '/cyph/cyph.app/node_modules/devextreme/events/core/events_engine', '/cyph/cyph.app/node_modules/devextreme/core/utils/ajax', '/cyph/cyph.app/node_modules/devextreme/core/utils/deferred'. This is probably not a problem, but may cause the compilation of entry points to be out of order.
Warning: Entry point 'devextreme-angular/ui/nested' contains deep imports into '/cyph/cyph.app/node_modules/devextreme/bundles/dx.all', '/cyph/cyph.app/node_modules/devextreme/animation/fx', '/cyph/cyph.app/node_modules/devextreme/viz/core/base_widget', '/cyph/cyph.app/node_modules/devextreme/ui/widget/ui.widget', '/cyph/cyph.app/node_modules/devextreme/ui/box', '/cyph/cyph.app/node_modules/devextreme/ui/button', '/cyph/cyph.app/node_modules/devextreme/ui/tab_panel', '/cyph/cyph.app/node_modules/devextreme/ui/form', '/cyph/cyph.app/node_modules/devextreme/data/abstract_store', '/cyph/cyph.app/node_modules/devextreme/ui/pivot_grid/xmla_store', '/cyph/cyph.app/node_modules/devextreme/ui/popup'. This is probably not a problem, but may cause the compilation of entry points to be out of order.
(node:320) UnhandledPromiseRejectionWarning: TypeError: The 'compilation' argument must be an instance of Compilation
    at getCompilationHooks (/cyph/cyph.app/node_modules/webpack/lib/javascript/JavascriptModulesPlugin.js:125:10)
    at /cyph/cyph.app/node_modules/webpack/lib/javascript/CommonJsChunkFormatPlugin.js:43:19
    at Hook.eval [as call] (eval at create (/cyph/cyph.app/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:7:1)
    at Hook.CALL_DELEGATE [as _call] (/cyph/cyph.app/node_modules/tapable/lib/Hook.js:14:14)
    at Compiler.newCompilation (/cyph/cyph.app/node_modules/@angular-devkit/build-angular/node_modules/webpack/lib/Compiler.js:1030:30)
    at /cyph/cyph.app/node_modules/@angular-devkit/build-angular/node_modules/webpack/lib/Compiler.js:1073:29
    at Hook.eval [as callAsync] (eval at create (/cyph/cyph.app/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/cyph/cyph.app/node_modules/tapable/lib/Hook.js:18:14)
    at Compiler.compile (/cyph/cyph.app/node_modules/@angular-devkit/build-angular/node_modules/webpack/lib/Compiler.js:1068:28)
    at Compiler.runAsChild (/cyph/cyph.app/node_modules/@angular-devkit/build-angular/node_modules/webpack/lib/Compiler.js:520:8)
    at /cyph/cyph.app/node_modules/@ngtools/webpack/src/resource_loader.js:135:27
    at new Promise (<anonymous>)
    at WebpackResourceLoader._compile (/cyph/cyph.app/node_modules/@ngtools/webpack/src/resource_loader.js:134:16)
    at WebpackResourceLoader.get (/cyph/cyph.app/node_modules/@ngtools/webpack/src/resource_loader.js:210:44)
    at Object.resourceHost.readResource (/cyph/cyph.app/node_modules/@ngtools/webpack/src/ivy/host.js:30:35)
    at AdapterResourceLoader.preload (/cyph/cyph.app/node_modules/@angular/compiler-cli/src/ngtsc/resource/src/loader.js:88:39)
(Use `node --trace-warnings ...` to show where the warning was created)
(node:320) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 88)
(node:320) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
⠙ Generating browser application bundles (phase: building)...(node:320) PromiseRejectionHandledWarning: Promise rejection was handled asynchronously (rejection id: 88)
⠴ Generating browser application bundles (phase: building)...WARNING: The same color styles are generated multiple times. Read more about how style duplication can be avoided in a dedicated guide. https://github.com/angular/components/blob/master/guides/duplicate-theming-styles.md
    node_modules/@angular/material/core/theming/_theming.scss 289:7                    private-check-duplicate-theme-styles()
    node_modules/@angular/material/progress-spinner/_progress-spinner-theme.scss 31:3  theme()
    src/css/mixins.scss 167:4                                                          cyph-apply-theme()
    src/css/cyph.base.scss 5:1                                                         @import
    src/css/cyph.app.scss 11:9                                                         root stylesheet

[...]

✔ Browser application bundle generation complete.

Warning: /cyph/cyph.app/src/js/externals/_stream_duplex.ts is part of the TypeScript compilation but it's unused.
Add only entry points to the 'files' or 'include' properties in your tsconfig.

[...]

./node_modules/@angular-devkit/build-angular/src/webpack/es5-polyfills.js - Error: Module build failed (from ./node_modules/@ngtools/webpack/src/ivy/index.js):
TypeError: The 'compilation' argument must be an instance of Compilation
    at getCompilationHooks (/cyph/cyph.app/node_modules/webpack/lib/javascript/JavascriptModulesPlugin.js:125:10)
    at /cyph/cyph.app/node_modules/webpack/lib/javascript/CommonJsChunkFormatPlugin.js:43:19
    at Hook.eval [as call] (eval at create (/cyph/cyph.app/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:7:1)
    at Hook.CALL_DELEGATE [as _call] (/cyph/cyph.app/node_modules/tapable/lib/Hook.js:14:14)
    at Compiler.newCompilation (/cyph/cyph.app/node_modules/@angular-devkit/build-angular/node_modules/webpack/lib/Compiler.js:1030:30)
    at /cyph/cyph.app/node_modules/@angular-devkit/build-angular/node_modules/webpack/lib/Compiler.js:1073:29
    at Hook.eval [as callAsync] (eval at create (/cyph/cyph.app/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/cyph/cyph.app/node_modules/tapable/lib/Hook.js:18:14)
    at Compiler.compile (/cyph/cyph.app/node_modules/@angular-devkit/build-angular/node_modules/webpack/lib/Compiler.js:1068:28)
    at Compiler.runAsChild (/cyph/cyph.app/node_modules/@angular-devkit/build-angular/node_modules/webpack/lib/Compiler.js:520:8)
    at /cyph/cyph.app/node_modules/@ngtools/webpack/src/resource_loader.js:135:27
    at new Promise (<anonymous>)
    at WebpackResourceLoader._compile (/cyph/cyph.app/node_modules/@ngtools/webpack/src/resource_loader.js:134:16)
    at WebpackResourceLoader.get (/cyph/cyph.app/node_modules/@ngtools/webpack/src/resource_loader.js:210:44)
    at Object.resourceHost.readResource (/cyph/cyph.app/node_modules/@ngtools/webpack/src/ivy/host.js:30:35)
    at AdapterResourceLoader.preload (/cyph/cyph.app/node_modules/@angular/compiler-cli/src/ngtsc/resource/src/loader.js:88:39)

./src/js/cyph.app/main.ts - Error: Module build failed (from ./node_modules/@ngtools/webpack/src/ivy/index.js):
TypeError: The 'compilation' argument must be an instance of Compilation
    at getCompilationHooks (/cyph/cyph.app/node_modules/webpack/lib/javascript/JavascriptModulesPlugin.js:125:10)
    at /cyph/cyph.app/node_modules/webpack/lib/javascript/CommonJsChunkFormatPlugin.js:43:19
    at Hook.eval [as call] (eval at create (/cyph/cyph.app/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:7:1)
    at Hook.CALL_DELEGATE [as _call] (/cyph/cyph.app/node_modules/tapable/lib/Hook.js:14:14)
    at Compiler.newCompilation (/cyph/cyph.app/node_modules/@angular-devkit/build-angular/node_modules/webpack/lib/Compiler.js:1030:30)
    at /cyph/cyph.app/node_modules/@angular-devkit/build-angular/node_modules/webpack/lib/Compiler.js:1073:29
    at Hook.eval [as callAsync] (eval at create (/cyph/cyph.app/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/cyph/cyph.app/node_modules/tapable/lib/Hook.js:18:14)
    at Compiler.compile (/cyph/cyph.app/node_modules/@angular-devkit/build-angular/node_modules/webpack/lib/Compiler.js:1068:28)
    at Compiler.runAsChild (/cyph/cyph.app/node_modules/@angular-devkit/build-angular/node_modules/webpack/lib/Compiler.js:520:8)
    at /cyph/cyph.app/node_modules/@ngtools/webpack/src/resource_loader.js:135:27
    at new Promise (<anonymous>)
    at WebpackResourceLoader._compile (/cyph/cyph.app/node_modules/@ngtools/webpack/src/resource_loader.js:134:16)
    at WebpackResourceLoader.get (/cyph/cyph.app/node_modules/@ngtools/webpack/src/resource_loader.js:210:44)
    at Object.resourceHost.readResource (/cyph/cyph.app/node_modules/@ngtools/webpack/src/ivy/host.js:30:35)
    at AdapterResourceLoader.preload (/cyph/cyph.app/node_modules/@angular/compiler-cli/src/ngtsc/resource/src/loader.js:88:39)

./src/js/cyph.app/polyfills.ts - Error: Module build failed (from ./node_modules/@ngtools/webpack/src/ivy/index.js):
TypeError: The 'compilation' argument must be an instance of Compilation
    at getCompilationHooks (/cyph/cyph.app/node_modules/webpack/lib/javascript/JavascriptModulesPlugin.js:125:10)
    at /cyph/cyph.app/node_modules/webpack/lib/javascript/CommonJsChunkFormatPlugin.js:43:19
    at Hook.eval [as call] (eval at create (/cyph/cyph.app/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:7:1)
    at Hook.CALL_DELEGATE [as _call] (/cyph/cyph.app/node_modules/tapable/lib/Hook.js:14:14)
    at Compiler.newCompilation (/cyph/cyph.app/node_modules/@angular-devkit/build-angular/node_modules/webpack/lib/Compiler.js:1030:30)
    at /cyph/cyph.app/node_modules/@angular-devkit/build-angular/node_modules/webpack/lib/Compiler.js:1073:29
    at Hook.eval [as callAsync] (eval at create (/cyph/cyph.app/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/cyph/cyph.app/node_modules/tapable/lib/Hook.js:18:14)
    at Compiler.compile (/cyph/cyph.app/node_modules/@angular-devkit/build-angular/node_modules/webpack/lib/Compiler.js:1068:28)
    at Compiler.runAsChild (/cyph/cyph.app/node_modules/@angular-devkit/build-angular/node_modules/webpack/lib/Compiler.js:520:8)
    at /cyph/cyph.app/node_modules/@ngtools/webpack/src/resource_loader.js:135:27
    at new Promise (<anonymous>)
    at WebpackResourceLoader._compile (/cyph/cyph.app/node_modules/@ngtools/webpack/src/resource_loader.js:134:16)
    at WebpackResourceLoader.get (/cyph/cyph.app/node_modules/@ngtools/webpack/src/resource_loader.js:210:44)
    at Object.resourceHost.readResource (/cyph/cyph.app/node_modules/@ngtools/webpack/src/ivy/host.js:30:35)
    at AdapterResourceLoader.preload (/cyph/cyph.app/node_modules/@angular/compiler-cli/src/ngtsc/resource/src/loader.js:88:39)

Angular 12 with Webpack 4:

⠋ Generating browser application bundles...Warning: Entry point 'devextreme-angular/ui/file-manager' contains deep imports into '/cyph/cyph.app/node_modules/devextreme/ui/file_manager', '/cyph/cyph.app/node_modules/devextreme/bundles/dx.all'. This is probably not a problem, but may cause the compilation of entry points to be out of order.
Warning: Entry point 'angular2-text-mask' contains deep imports into '/cyph/cyph.app/node_modules/text-mask-core/dist/textMaskCore'. This is probably not a problem, but may cause the compilation of entry points to be out of order.
Warning: Entry point 'devextreme-angular/core' contains deep imports into '/cyph/cyph.app/node_modules/devextreme/core/utils/common', '/cyph/cyph.app/node_modules/devextreme/core/dom_adapter', '/cyph/cyph.app/node_modules/devextreme/events', '/cyph/cyph.app/node_modules/devextreme/core/renderer', '/cyph/cyph.app/node_modules/devextreme/core/http_request', '/cyph/cyph.app/node_modules/devextreme/core/utils/ready_callbacks', '/cyph/cyph.app/node_modules/devextreme/events/core/events_engine', '/cyph/cyph.app/node_modules/devextreme/core/utils/ajax', '/cyph/cyph.app/node_modules/devextreme/core/utils/deferred'. This is probably not a problem, but may cause the compilation of entry points to be out of order.
Warning: Entry point 'devextreme-angular/ui/nested' contains deep imports into '/cyph/cyph.app/node_modules/devextreme/bundles/dx.all', '/cyph/cyph.app/node_modules/devextreme/animation/fx', '/cyph/cyph.app/node_modules/devextreme/viz/core/base_widget', '/cyph/cyph.app/node_modules/devextreme/ui/widget/ui.widget', '/cyph/cyph.app/node_modules/devextreme/ui/box', '/cyph/cyph.app/node_modules/devextreme/ui/button', '/cyph/cyph.app/node_modules/devextreme/ui/tab_panel', '/cyph/cyph.app/node_modules/devextreme/ui/form', '/cyph/cyph.app/node_modules/devextreme/data/abstract_store', '/cyph/cyph.app/node_modules/devextreme/ui/pivot_grid/xmla_store', '/cyph/cyph.app/node_modules/devextreme/ui/popup'. This is probably not a problem, but may cause the compilation of entry points to be out of order.
(node:8623) [DEP_WEBPACK_MAIN_TEMPLATE_HASH_FOR_CHUNK] DeprecationWarning: MainTemplate.hooks.hashForChunk is deprecated (use JavascriptModulesPlugin.getCompilationHooks().chunkHash instead)
(Use `node --trace-deprecation ...` to show where the warning was created)
(node:8623) [DEP_WEBPACK_CHUNK_TEMPLATE_HASH_FOR_CHUNK] DeprecationWarning: ChunkTemplate.hooks.hashForChunk is deprecated (use JavascriptModulesPlugin.getCompilationHooks().chunkHash instead)
(node:8623) [DEP_WEBPACK_COMPILATION_OPTIMIZE_CHUNK_ASSETS] DeprecationWarning: optimizeChunkAssets is deprecated (use Compilation.hooks.processAssets instead and use one of Compilation.PROCESS_ASSETS_STAGE_* as stage option)
(node:8623) UnhandledPromiseRejectionWarning: TypeError: webpack_1.node.NodeTargetPlugin is not a constructor
    at WebpackResourceLoader._compile (/cyph/cyph.app/node_modules/@ngtools/webpack/src/resource_loader.js:83:13)
    at WebpackResourceLoader.get (/cyph/cyph.app/node_modules/@ngtools/webpack/src/resource_loader.js:210:44)
    at Object.resourceHost.readResource (/cyph/cyph.app/node_modules/@ngtools/webpack/src/ivy/host.js:30:35)
    at AdapterResourceLoader.preload (/cyph/cyph.app/node_modules/@angular/compiler-cli/src/ngtsc/resource/src/loader.js:88:39)
    at resolveStyleUrl (/cyph/cyph.app/node_modules/@angular/compiler-cli/src/ngtsc/annotations/src/component.js:192:49)
    at /cyph/cyph.app/node_modules/@angular/compiler-cli/src/ngtsc/annotations/src/component.js:233:83
    at Array.map (<anonymous>)
    at ComponentDecoratorHandler.preanalyze (/cyph/cyph.app/node_modules/@angular/compiler-cli/src/ngtsc/annotations/src/component.js:233:50)
    at _loop_1 (/cyph/cyph.app/node_modules/@angular/compiler-cli/src/ngtsc/transform/src/compilation.js:321:53)
    at TraitCompiler.analyzeClass (/cyph/cyph.app/node_modules/@angular/compiler-cli/src/ngtsc/transform/src/compilation.js:343:35)
    at visit (/cyph/cyph.app/node_modules/@angular/compiler-cli/src/ngtsc/transform/src/compilation.js:113:27)
    at visitNodes (/cyph/cyph.app/node_modules/typescript/lib/typescript.js:28217:30)
    at Object.forEachChild (/cyph/cyph.app/node_modules/typescript/lib/typescript.js:28456:24)
    at visit (/cyph/cyph.app/node_modules/@angular/compiler-cli/src/ngtsc/transform/src/compilation.js:115:20)
    at TraitCompiler.analyze (/cyph/cyph.app/node_modules/@angular/compiler-cli/src/ngtsc/transform/src/compilation.js:117:13)
    at TraitCompiler.analyzeAsync (/cyph/cyph.app/node_modules/@angular/compiler-cli/src/ngtsc/transform/src/compilation.js:79:25)
(node:8623) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 88)
(node:8623) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
✔ Browser application bundle generation complete.

Error: webpack_1.util.cleverMerge is not a function

Error: webpack_1.util.cleverMerge is not a function

Error: webpack_1.util.cleverMerge is not a function

Error: webpack_1.util.cleverMerge is not a function

Error: webpack_1.util.cleverMerge is not a function

Your Environment

Angular Version:

Angular CLI: 12.0.0
Node: 14.17.0
Package Manager: npm 7.12.1
OS: linux arm64

Angular:
...

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.1200.0
@angular-devkit/core         12.0.0
@angular-devkit/schematics   12.0.0
@schematics/angular          12.0.0

Anything else relevant?

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions