v12.3.3 update-webpack-browser-config migration fails

[BrandonClapp]

Current Behavior

When attempting to upgrade from @nrwl/angular 12.0.1 to 12.3.3 I receive the following error when trying to run the update-webpack-browser-config migration.

Running migration update-webpack-browser-config
Cannot convert undefined or null to object

Full error provided below.

Expected Behavior

Migration runs without error

Steps to Reproduce

1. From a workspace with a v12.0.1 workspace, run nx migrate latest.
2. v12.3.3 migrations.json will be created, package.json will be updated with latest versions
3. npm install
4. nx migrate --run-migrations=migrations.json
5. Migration error occurs.

Failure Logs

Cannot convert undefined or null to object
/Users/brandon/Documents/Source/appian-enterprise/EnterpriseUI/node_modules/@nrwl/workspace/node_modules/yargs/build/lib/yargs.js:1132
                throw err;
                ^

Error: Command failed: /var/folders/n5/nk8lp0453y18w5_02g8v9wch0000gn/T/tmp-80750-OHgt2KfMvjBm/node_modules/.bin/tao migrate --run-migrations=migrations.json
    at checkExecSyncError (child_process.js:640:11)
    at Object.execSync (child_process.js:676:15)
    at Object.handler (/Users/brandon/Documents/Source/appian-enterprise/EnterpriseUI/node_modules/@nrwl/workspace/src/command-line/nx-commands.js:90:25)
    at Object.runCommand (/Users/brandon/Documents/Source/appian-enterprise/EnterpriseUI/node_modules/@nrwl/workspace/node_modules/yargs/build/lib/command.js:196:48)
    at Object.parseArgs [as _parseArgs] (/Users/brandon/Documents/Source/appian-enterprise/EnterpriseUI/node_modules/@nrwl/workspace/node_modules/yargs/build/lib/yargs.js:1043:55)
    at Object.get [as argv] (/Users/brandon/Documents/Source/appian-enterprise/EnterpriseUI/node_modules/@nrwl/workspace/node_modules/yargs/build/lib/yargs.js:986:25)
    at Object.initLocal (/Users/brandon/Documents/Source/appian-enterprise/EnterpriseUI/node_modules/@nrwl/cli/lib/init-local.js:26:79)
    at Object.<anonymous> (/Users/brandon/Documents/Source/appian-enterprise/EnterpriseUI/node_modules/@nrwl/cli/bin/nx.js:43:18)
    at Module._compile (internal/modules/cjs/loader.js:1068:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1097:10) {
  status: 1,
  signal: null,
  output: [ null, null, null ],
  pid: 80771,
  stdout: null,
  stderr: null
}

Environment

Node : 14.17.0 OS : darwin x64 npm : 6.14.13

nx : Not Found @nrwl/angular : 12.3.3 @nrwl/cli : 12.3.3 @nrwl/cypress : 12.3.3 @nrwl/devkit : 12.3.3 @nrwl/eslint-plugin-nx : Not Found @nrwl/express : Not Found @nrwl/jest : 12.3.3 @nrwl/linter : 12.3.3 @nrwl/nest : Not Found @nrwl/next : Not Found @nrwl/node : Not Found @nrwl/react : Not Found @nrwl/schematics : Not Found @nrwl/tao : 12.3.3 @nrwl/web : Not Found @nrwl/workspace : 12.3.3 @nrwl/storybook : Not Found @nrwl/gatsby : Not Found typescript : 4.2.4

[leosvelperez]

@BrandonClapp thanks for reporting this!

I tried to reproduce the issue but unfortunately, I was not able to do so. I created a workspace with an Angular preset using Nx 12.0.1 and then, I followed the steps you mentioned in the issue description, but the migration ran successfully.

I revisited the migration code and one thing I can see that could be causing the issue is if there's a project in the workspace configuration (angular.json or workspace.json) without the targets|architect property, which is a required property.

Could you please double-check that? If that's not the issue, could you share a repo where the issue can be reproduced so we can troubleshoot it?

[BrandonClapp]

Thanks for looking into that @leosvelperez. You nailed it, that was exactly it. Of the 72 projects in angular.json, only 71 of them had a architect property.

I've simply added "architect": {} to the project with the missing property and the migration executes successfully now.

Unfortunately, when I try to ng serve after the migration, I receive errors and the angular app responds with Cannot GET /

Error: webpack_1.util.cleverMerge is not a function

This may or may not be related to setting architect to an empty object, but it seems to get me moving in the right direction.

[leosvelperez]

I've simply added "architect": {} to the project with the missing property and the migration executes successfully now.

Out of curiosity, why would you need a project without the architect property? That sounds that you really don't need it there, the workspace configuration is for defining targets to execute commands for each project.

Unfortunately, when I try to ng serve after the migration, I receive errors and the angular app responds with Cannot GET /

Error: webpack_1.util.cleverMerge is not a function

This may or may not be related to setting architect to an empty object, but it seems to get me moving in the right direction.

That one is not related to architect being empty. You can remove the project with the empty architect and you should still have the same issue.

That error occurs when you have Webpack 4 and 5 in the same workspace and package hoisting didn't work as expected. It normally happens with npm and it could be solved by deleting the node_modules and package-lock.json and reinstall the dependencies. Angular 12 requires Webpack 5 now. I don't see in the nx report results you shared that you're using any of the other nrwl packages that still depend on Webpack 4, so you might be depending directly on Webpack 4 or a package that depends on it (maybe one of the custom webpack builders?).

You can run npm ls webpack to check the versions you have in your workspace and troubleshoot if those are expected.

[BrandonClapp]

Thanks for the help @leosvelperez, you've been super helpful.

As far as why I added an empty object to architect, it was honestly just out of sheer ignorance on what the property does. I will need to go back and compare it to other projects and see how that property needs to be configured.

You was right on the version of webpack being the issue. The issue was that our workspace had webpack as a devDependency in the package.json. It turns out that @angular-devkit/build-angular has it's own dependency on webpack (it needs 5.36.2) and webpack isn't needed as a direct dependency (not sure if it used to be?).

I had assumed that an nx migration would take care of removing webpack from our package.json, but maybe that's a bad assumption. I don't know how it got installed there in the first place, we've upgraded this workspace since Angular 6 or 7.

https://github.com/angular/angular-cli/issues/20773#issuecomment-845426252 Here's more info if anyone else has this issue.

[leosvelperez]

@BrandonClapp glad to help!

I had assumed that an nx migration would take care of removing webpack from our package.json, but maybe that's a bad assumption.

Yep, we can't (shouldn't) assume we can remove Webpack as a direct dependency in a project because it could actually be something the dev added or it's using directly. If we add an automatic migration to remove it we could break some workspaces.

[leosvelperez]

I'm closing this since the issue seems to have been resolved. If you still think this is an issue, please feel free to reopen it.

[maxailloud]

@leosvelperez I am having the exact same issue but in my angular.json file all my projects have their own architect property. What else could cause this error if not that?

In case here is the result of npx nx version after npm install:

Angular CLI: 12.1.3
Node: 15.11.0 (Unsupported)
Package Manager: npm 6.14.12
OS: darwin x64

Angular: 12.1.3
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, material, platform-browser
... platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1201.3
@angular-devkit/build-angular   12.1.3
@angular-devkit/core            11.2.13
@angular-devkit/schematics      12.1.3
@angular/cdk                    11.2.13
@schematics/angular             12.1.3
rxjs                            6.6.7
typescript                      4.3.5

Edit: Never mind I realised that I do have a project without the architect property, a project there just to share assets between projects so no architect so typescript and so on. Adding an empty architect property seem to have done the trick.

[pamadei]

I was having the same issue after running nx migrate 12.7.1. I managed to fix this by adding the project name to the projects property in nx.json.

 "projects": {
    "project-name": {}
  }

[github-actions[bot]]

This issue has been closed for more than 30 days. If this issue is still occuring, please open a new issue with more recent context.