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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Closed
buu700 opened this issue May 14, 2021 · 6 comments
Closed

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

buu700 opened this issue May 14, 2021 · 6 comments
Labels
needs: more info Reporter must clarify the issue

Comments

@buu700
Copy link
Contributor

buu700 commented May 14, 2021

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?
@buu700 buu700 changed the title [Angular 12 / Webpack 5] TypeError: The 'compilation' argument must be an instance of Compilation [Angular 12] The 'compilation' argument must be an instance of Compilation (Webpack 5) / webpack_1.util.cleverMerge is not a function (Webpack 4) May 14, 2021
@alan-agius4 alan-agius4 transferred this issue from angular/angular May 14, 2021
@alan-agius4
Copy link
Collaborator

@buu700, it's not clear how dependencies are managed in your project. The above errors indicated that you have the wrong version of Webpack installed in your application.

Webpack is a direct dependency of @angular-devkit/build-angular and does not get updated separately.

Can you try deleting the package lock file and the node modules directory and then reinstalling?

If the problem persists please provide the output of npm ls webpack

@alan-agius4 alan-agius4 added the needs: more info Reporter must clarify the issue label May 14, 2021
@cardamon
Copy link

FYI, this may be caused by having the mini-css-extract-plugin in your devDependencies. For us, just removing it fixed the error.
(We needed in the past as a workaround for some obscure SCSS error, but it no longer seems to be necessary...)

@mshima
Copy link

mshima commented May 14, 2021

I can confirm the error:

npm ls webpack output:

├─┬ @angular-builders/[email protected]
│ └─┬ @angular-devkit/[email protected]
│   ├─┬ @angular-devkit/[email protected]
│   │ └── [email protected] deduped
│   ├─┬ @angular-devkit/[email protected]
│   │ └── [email protected] deduped
│   ├─┬ @ngtools/[email protected]
│   │ └── [email protected] deduped
│   ├─┬ [email protected]
│   │ └── [email protected] deduped
│   ├─┬ [email protected]
│   │ └── [email protected] deduped
│   ├─┬ [email protected]
│   │ └── [email protected] deduped
│   ├─┬ [email protected]
│   │ └── [email protected] deduped
│   ├─┬ [email protected]
│   │ └── [email protected] deduped
│   ├─┬ [email protected]
│   │ └── [email protected] deduped
│   ├─┬ [email protected]
│   │ └── [email protected] deduped
│   ├─┬ [email protected]
│   │ └── [email protected] deduped
│   ├─┬ [email protected]
│   │ └── [email protected] deduped
│   ├─┬ [email protected]
│   │ └── [email protected] deduped
│   ├─┬ [email protected]
│   │ └── [email protected] deduped
│   ├─┬ [email protected]
│   │ └── [email protected] deduped
│   ├─┬ [email protected]
│   │ └── [email protected] deduped
│   ├─┬ [email protected]
│   │ ├─┬ [email protected]
│   │ │ └── [email protected] deduped
│   │ └── [email protected] deduped
│   ├─┬ [email protected]
│   │ └── [email protected] deduped
│   └─┬ [email protected]
│     └─┬ [email protected]
│       └── [email protected] deduped
├─┬ [email protected]
│ └── [email protected] deduped
├─┬ [email protected]
│ └── [email protected] deduped
├─┬ [email protected]
│ └── [email protected] deduped
├─┬ [email protected]
│ └── [email protected] deduped
└─┬ [email protected]
  └─┬ [email protected]
    └── [email protected] deduped

Reverting webpack to 5.36.2 to match @angular-devkit/build-angular fixed version fix the problem.

@buu700
Copy link
Contributor Author

buu700 commented May 15, 2021 •
edited
Loading

Thanks @mshima and @alan-agius4, that got me closer. I didn't realize that installing webpack directly in our package.json would cause issues. We use webpack separately from Angular as well, but having just @angular-devkit/build-angular and webpack-cli was enough for what we need.

I'm seeing something else now, but I think it's an unrelated issue, so I'm going to go ahead and create a new ticket. I'll also leave this ticket open in case this issue is still considered a bug in and of itself (or something that needs to be documented, if it isn't already).

FYI, this may be caused by having the mini-css-extract-plugin in your devDependencies. For us, just removing it fixed the error.

Hm, are you sure that's an issue, and if so is it a problem that it's already a dependency of @angular-devkit/build-angular?

@mshima
Copy link

mshima commented May 15, 2021

Duplicate of #20773

@buu700 buu700 closed this as completed May 15, 2021
@buu700 buu700 mentioned this issue May 15, 2021
Closed
@rp3e11 rp3e11 mentioned this issue May 16, 2021
Closed
@janousek janousek mentioned this issue May 28, 2021
Closed
15 tasks
@angular-automatic-lock-bot
Copy link

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Jul 8, 2021
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
needs: more info Reporter must clarify the issue
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@buu700 @mshima @cardamon @alan-agius4