TypeError: The 'compilation' argument must be an instance of Compilation #20773

Tallyb · 2021-05-13T17:09:58Z

Upgrading from angular 11.2 to angular 12 and trying ng build / ng serve causes this error.

Is this a regression?

yes. Used to build in previous version.

Description

A clear and concise description of the problem...

Minimal Reproduction

https://stackblitz.com/...

Exception or Error


TypeError: The 'compilation' argument must be an instance of Compilation
    at Function.getCompilationHooks (/Users/me/my-proj/node_modules/webpack/lib/javascript/JavascriptModulesPlugin.js:125:10)
    at /Users/me/my-proj/node_modules/terser-webpack-plugin/dist/index.js:566:67
    at _next43 (eval at create (/Users/me/my-proj/node_modules/tapable/lib/HookCodeFactory.js:19:10), :77:1)
    at _next21 (eval at create (/Users/me/my-proj/node_modules/tapable/lib/HookCodeFactory.js:19:10), :189:1)
    at Hook.eval [as call] (eval at create (/Users/me/my-proj/node_modules/tapable/lib/HookCodeFactory.js:19:10), :279:1)
    at Hook.CALL_DELEGATE [as _call] (/Users/me/my-proj/node_modules/tapable/lib/Hook.js:14:14)
    at Compiler.newCompilation (/Users/me/my-proj/node_modules/@angular-devkit/build-angular/node_modules/webpack/lib/Compiler.js:1031:26)
    at /Users/me/my-proj/node_modules/@angular-devkit/build-angular/node_modules/webpack/lib/Compiler.js:1073:29
    at Hook.eval [as callAsync] (eval at create (/Users/me/my-proj/node_modules/tapable/lib/HookCodeFactory.js:33:10), :22:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/Users/me/my-proj/node_modules/tapable/lib/Hook.js:18:14)
    at Compiler.compile (/Users/me/my-proj/node_modules/@angular-devkit/build-angular/node_modules/webpack/lib/Compiler.js:1068:28)
    at /Users/me/my-proj/node_modules/@angular-devkit/build-angular/node_modules/webpack/lib/Compiler.js:496:12
    at Compiler.readRecords (/Users/me/my-proj/node_modules/@angular-devkit/build-angular/node_modules/webpack/lib/Compiler.js:908:11)
    at /Users/me/my-proj/node_modules/@angular-devkit/build-angular/node_modules/webpack/lib/Compiler.js:493:11
    at Hook.eval [as callAsync] (eval at create (/Users/me/my-proj/node_modules/tapable/lib/HookCodeFactory.js:33:10), :10:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/Users/me/my-proj/node_modules/tapable/lib/Hook.js:18:14)
An unhandled exception occurred: The 'compilation' argument must be an instance of Compilation
See "/private/var/folders/99/y2bb165n66q99tqwsv7bpt600000gn/T/ng-GPq9IO/angular-errors.log" for further details.

Your Environment

Angular Version:


@angular-devkit/architect       0.1200.0
@angular-devkit/build-angular   12.0.0
@angular-devkit/core            12.0.0
@angular-devkit/schematics      12.0.0
@nguniversal/builders           12.0.0
@nguniversal/express-engine     12.0.0
@schematics/angular             12.0.0
rxjs                            7.0.0
typescript                      4.2.4

Anything else relevant?

The text was updated successfully, but these errors were encountered:

alan-agius4 · 2021-05-13T17:46:10Z

@richie50,

Can you please provide the output of ng v and npm ls webpack?

Thanks.

Tallyb · 2021-05-14T04:19:18Z

│ ├─┬ @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]
│ │ │ └── [email protected] deduped
│ │ └── [email protected] deduped
│ └─┬ [email protected]
│   └─┬ [email protected]
│     └── [email protected] deduped
├─┬ @storybook/[email protected]
│ ├─┬ @storybook/[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] deduped
│ │ ├─┬ [email protected]
│ │ │ └── [email protected] deduped
│ │ └─┬ [email protected]
│ │   └─┬ [email protected]
│ │     └── [email protected] deduped
│ └─┬ [email protected]
│   └─┬ [email protected]
│     └── [email protected] deduped
├─┬ @storybook/[email protected]
│ └── [email protected] deduped
├─┬ @storybook/[email protected]
│ ├─┬ @storybook/[email protected]
│ │ └─┬ [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]
│     └── [email protected] deduped
├─┬ @storybook/[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] deduped
├─┬ @storybook/[email protected]
│ ├─┬ @storybook/[email protected]
│ │ └── [email protected] deduped
│ └─┬ @storybook/[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
├─┬ @storybook/[email protected]
│ └─┬ [email protected]
│   └── [email protected] deduped
├─┬ @storybook/[email protected]
│ └─┬ [email protected]
│   └── [email protected] deduped
├─┬ [email protected]
│ └── [email protected] deduped
└─┬ [email protected]
  └─┬ [email protected]
    └── [email protected] deduped

Tallyb · 2021-05-14T04:23:37Z

You have webpack installed more than once.
npm i --save-dev [email protected]

with terser being a dep of webpack AND having webpack as a dependency, I do not think it can be avoided.

zehavibarak · 2021-05-14T04:24:56Z

Install terser directly

Tallyb · 2021-05-14T04:29:37Z

@zehavibarak thank you for your attempt to help. can you explain a bit what do you think the issue is and how this will solve it?

zehavibarak · 2021-05-14T05:14:18Z

You have more than one webpack version. Install latest terser and make sure to install webpack of a version that matches the inner version.

zehavibarak · 2021-05-14T06:02:00Z

bash

npm i --save-dev sass-loader terser-webpack-plugin css-loader webpack-dev-middleware style-loader dotenv-webpack ts-loader sass-loader

and verify webpack is of 5.37

alan-agius4 · 2021-05-14T07:59:24Z

Webpack is a direct dependency of @angular-devkit/build-angular and it should not be added as a direct dependency in your project unless you use Webpack directly.

Probably, something went wrong during module hoisting, can you please try the below;

rm -rf node_modules package-lock.json
npm i

NB: please revert any changes suggested above by @zehavibarak. This will most certainly cause your project to be in a broken state.

zehavibarak · 2021-05-14T08:06:09Z

It may align all versions, worth at least a try. There is that other bug you avoid. The one you closed without resolving

careywalker · 2021-05-14T08:48:40Z

I am having this issue as well. The webpack version alignment didn't work. I'll try the below to see if that helps:

rm -rf node_modules package-lock.json
npm i

zehavibarak · 2021-05-14T10:21:28Z

@careywalker share your npm ls webpack

careywalker · 2021-05-14T16:10:31Z

This isn't an issue for me anymore.

What I did:

Deleted the specific reference I had to webpack from package.json (I had this there because I was using webpack 5 with Angular 11 so I could start using module-federation. I'm converting an existing application to use a micro-front end architecture)
Deleted package-lock.json
Ran npm install
Ran ng update @angular/core@12 @angular/cli@12

Once I did the above, I no longer get the error on ng build.

mshima · 2021-05-15T18:00:27Z

The error happens when there are 2 versions of webpack in the dependency tree. eg [email protected] and [email protected].
@angular-devkit/[email protected] has a transient dependency on [email protected] and will fail when webpack@!=5.36.2 is in @angular-devkit/build-webpack tree.

There are no safeguards for this problem.
IMO:

@angular-devkit/build-angular should add a peer dependency on [email protected].
@angular/angular-cli should add a peer dependency on @angular-devkit/build-angular.

This will force [email protected] to be deduped at the root of the project.

To workaround the problem:

Add dependency on [email protected] or remove webpack from dependency and recreate node_modules/package-lock
Don't use npm install --force (not deduping right), use npm install --legacy-peer-deps instead.

clydin · 2021-05-15T20:08:35Z

If npm install --legacy-peer-deps resolves the problem, then the issue's root cause could likely be a defect in npm 7. From the npm ls output above, there is a valid version of Webpack (5.36.2) available that could be used to satisfy the sibling peer dependencies. However, npm 7 appears to be choosing to ignore that already installed instance and use a different version (5.37.0) to satisfy those peer dependencies. There have been several critical peer dependency versioning defects corrected in recent versions of npm 7. If not on the latest version of npm 7 (currently: 7.13.0), please try upgrading. If this issue is occurring with the latest version of npm 7, that would be useful information as well.

mshima · 2021-05-15T21:57:08Z

Using npm 7.13.0.
npm install -f bug reproducible by:
npm install -f @ng-bootstrap/ng-bootstrap @angular-devkit/build-angular browser-sync-webpack-plugin

Additional peer dependencies would prevent a broken tree:

npm install [email protected] @angular-devkit/build-angular
npm uninstall webpack
npm ls webpack
├─┬ @angular-devkit/[email protected]
│ ├─┬ @angular-devkit/[email protected]
│ │ └── [email protected] deduped
│ ├─┬ @angular-devkit/[email protected]
│ │ └── [email protected] deduped

rp3e11 · 2021-05-16T11:54:04Z

I had a fairly similar issue, though I think not exactly the same. It is probably closer to #20786 which is marked a duplicate of this issue, so I still posted here. In contrast to this issue I use npm 6.14.3.

I use an nx workspace with angular, nestjs and storybook. When upgrading angular the app did not serve anymore throwing the following error

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

npm ls webpack resulted in

├─┬ @angular-devkit/[email protected]
│ └── UNMET PEER DEPENDENCY [email protected] 
├─┬ @nrwl/[email protected]
│ └─┬ @nrwl/[email protected]
│   └── [email protected] 
├─┬ @storybook/[email protected]
│ ├─┬ @storybook/[email protected]
│ │ └─┬ @storybook/[email protected]
│ │   ├─┬ @storybook/[email protected]
│ │   │ └── [email protected]  deduped
│ │   └── [email protected]  deduped
│ ├─┬ @storybook/[email protected]
│ │ └── [email protected]  deduped
│ └── [email protected] 
├─┬ @storybook/[email protected]
│ └── [email protected] 
└─┬ @types/[email protected]
  └── [email protected]

The upgarde left webpack at version 4 in the node_modules folder. I deleted the node_modules folder and package-lock.json and made a fresh npm install and it worked again. npm ls webpack now reports

├─┬ @angular-devkit/[email protected]
│ └── [email protected] 
├─┬ @nrwl/[email protected]
│ └─┬ @nrwl/[email protected]
│   └── [email protected] 
├─┬ @storybook/[email protected]
│ ├─┬ @storybook/[email protected]
│ │ └─┬ @storybook/[email protected]
│ │   ├─┬ @storybook/[email protected]
│ │   │ └── UNMET PEER DEPENDENCY [email protected] 
│ │   └── UNMET PEER DEPENDENCY [email protected] 
│ ├─┬ @storybook/[email protected]
│ │ └── [email protected] 
│ └── [email protected] 
├─┬ @storybook/[email protected]
│ └── [email protected]  deduped
└─┬ @types/[email protected]
  └── [email protected]  deduped

It seems as if the dependencies of webpack for angular and @nrwl/node are met, while the storybook dependency is not met.
Could it be that the angular update does not update webpack in case another package relies on an older version of webpack?

danielritter · 2021-05-17T09:05:00Z

I have the same issue, when I use npm i -f:

+-- @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]
| | | `-- [email protected] deduped
| | `-- [email protected] deduped
| `-- [email protected]
|   `-- [email protected]
|     `-- [email protected] deduped
+-- @nrwl/[email protected]
| `-- @cypress/[email protected]
|   `-- [email protected]
|     `-- [email protected]
|       `-- [email protected] deduped
+-- @nrwl/[email protected]
| +-- [email protected]
| | `-- [email protected] deduped
| +-- [email protected]
| | `-- [email protected] deduped
| `-- [email protected]
|   `-- [email protected]
|     `-- [email protected] deduped
+-- @nrwl/[email protected]
| `-- @nrwl/[email protected]
|   `-- @nrwl/[email protected]
|     `-- @cypress/[email protected]
|       `-- [email protected]
|         `-- [email protected]
|           `-- [email protected] deduped
+-- @storybook/[email protected]
| +-- @storybook/[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] deduped
| | +-- [email protected]
| | | `-- [email protected] deduped
| | +-- [email protected]
| | | `-- [email protected] deduped
| | +-- [email protected]
| | | `-- [email protected] deduped
| | `-- [email protected]
| |   `-- [email protected]
| |     `-- [email protected] deduped
| +-- @storybook/[email protected]
| | +-- @storybook/[email protected]
| | | `-- [email protected] deduped
| | `-- @storybook/[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
| `-- [email protected]
|   `-- [email protected]
|     `-- [email protected] deduped
+-- @storybook/[email protected]
| `-- [email protected] deduped
+-- @storybook/[email protected]
| +-- [email protected]
| | `-- [email protected] deduped
| +-- [email protected]
| | `-- [email protected] deduped
| `-- [email protected]
|   `-- [email protected] deduped
+-- @storybook/[email protected]
| +-- @storybook/[email protected]
| | `-- [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]
|     `-- [email protected] deduped
+-- [email protected]
| `-- [email protected] deduped
`-- [email protected]
  `-- [email protected]
    `-- [email protected]
      +-- [email protected]
      | `-- [email protected]
      |   `-- [email protected] deduped
      `-- [email protected]
        `-- [email protected] deduped

When I use npm install --legacy-peer-deps it compiles but at the end I get an Undefined: missing '{' error and the application cannot be opened and in my root application I have a This syntax requires an imported helper but module 'tslib' cannot be found error.

BrandonClapp · 2021-05-20T19:46:08Z

I was having this same issue in my nx workspace and finally figured it out.

I was hoping that nx would handle upgrading/removing the webpack dependencies, but it did not. Coming from previous version of angular, we've had webpack as a direct dev dependency inside of our package.json.

npm ls webpack was giving me unmet peer dependencies on @angular-devkit/[email protected].

I read in another issue (#20786 (comment)) that webpack doesn't need to be installed directly, because it's a dependency of the @angular-devkit/build-angular

Steps that fixed it for me:

Remove webpack as a direct devDependency in package.json (not needed anymore)
Deleted node_modules & package.lock.json
npm install

alan-agius4 · 2021-05-25T07:24:22Z

Closing as this doesn't appear to be caused by the Angular CLI.

johncrim · 2021-06-07T18:10:18Z

I was experiencing the same error. While we use webpack directly for some projects in our monorepo (so can't/shouldn't remove the explicit webpack dependency), we had a resolutions block in our package.json which was originally put there to use webpack 5 with Angular 11:

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

Thanks to the pointers from @alan-agius4 and others, I found that removing this block, and deleting yarn.lock and node_modules then running yarn fixes the problem.

…12.0.4+ @angular-devkit/build-angular 12.0.4+ makes build-storybook hang. Constraining it to 12.0.3 avoids the hang. Upstream issue, and workaround: storybookjs/storybook#15227 (comment) Also jump through some hoops to downgrade webpack from 5.39.1 to 5.38.1, to match the exact dependency expected by @angular-devkit/build-angular, and avoid this problem: angular/angular-cli#20773

angular-automatic-lock-bot · 2021-07-08T08:03:25Z

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.}

JoostK transferred this issue from angular/angular May 13, 2021

alan-agius4 added the needs: more info Reporter must clarify the issue label May 13, 2021

mshima mentioned this issue May 15, 2021

[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

BrandonClapp mentioned this issue May 20, 2021

v12.3.3 update-webpack-browser-config migration fails nrwl/nx#5706

Closed

alan-agius4 closed this as completed May 25, 2021

janousek mentioned this issue May 28, 2021

Forced version of the webpack #20977

Closed

15 tasks

angular-automatic-lock-bot bot locked and limited conversation to collaborators Jul 8, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

TypeError: The 'compilation' argument must be an instance of Compilation #20773

TypeError: The 'compilation' argument must be an instance of Compilation #20773

Tallyb commented May 13, 2021

alan-agius4 commented May 13, 2021

Tallyb commented May 14, 2021

Tallyb commented May 14, 2021

zehavibarak commented May 14, 2021 via email

Tallyb commented May 14, 2021

zehavibarak commented May 14, 2021 via email

zehavibarak commented May 14, 2021

alan-agius4 commented May 14, 2021 •

edited

Loading

zehavibarak commented May 14, 2021 via email

careywalker commented May 14, 2021

zehavibarak commented May 14, 2021

careywalker commented May 14, 2021

mshima commented May 15, 2021

clydin commented May 15, 2021

mshima commented May 15, 2021 •

edited

Loading

rp3e11 commented May 16, 2021

danielritter commented May 17, 2021 •

edited

Loading

BrandonClapp commented May 20, 2021

alan-agius4 commented May 25, 2021

johncrim commented Jun 7, 2021

angular-automatic-lock-bot bot commented Jul 8, 2021

TypeError: The 'compilation' argument must be an instance of Compilation #20773

TypeError: The 'compilation' argument must be an instance of Compilation #20773

Comments

Tallyb commented May 13, 2021

Is this a regression?

Description

Minimal Reproduction

Exception or Error

Your Environment

alan-agius4 commented May 13, 2021

Tallyb commented May 14, 2021

Tallyb commented May 14, 2021

zehavibarak commented May 14, 2021 via email

Tallyb commented May 14, 2021

zehavibarak commented May 14, 2021 via email

zehavibarak commented May 14, 2021

alan-agius4 commented May 14, 2021 • edited Loading

zehavibarak commented May 14, 2021 via email

careywalker commented May 14, 2021

zehavibarak commented May 14, 2021

careywalker commented May 14, 2021

mshima commented May 15, 2021

clydin commented May 15, 2021

mshima commented May 15, 2021 • edited Loading

rp3e11 commented May 16, 2021

danielritter commented May 17, 2021 • edited Loading

BrandonClapp commented May 20, 2021

alan-agius4 commented May 25, 2021

johncrim commented Jun 7, 2021

angular-automatic-lock-bot bot commented Jul 8, 2021

alan-agius4 commented May 14, 2021 •

edited

Loading

mshima commented May 15, 2021 •

edited

Loading

danielritter commented May 17, 2021 •

edited

Loading