Migration-Related Notes Nx 11 -> Nx 12

[vsavkin]

Folks, migrating workspaces is hard. Every workspace is different, with different combinations of versions, packages, package managers etc.. Also, every workspace evolves differently: as you migrate from version to version, you make small changes making your workspace unique.

Please read the following to learn about the migrate command: https://nx.dev/workspace/update.

To reiterate a few things from the doc:

Migrating From Older Versions of Nx

If you are on the latest Nx 10 or Nx 11, we will automatically use the latest version of the migration logic to update your workspace. There is nothing you need to do. Otherwise, you might want to read through notes here: https://github.com/nrwl/nx/issues/4333

One Major at a Time

It's easier to migrate one major version at a time. If you want to migrate from 10x to 12x (latest), you could run:

> nx migrate 11.6.3

And then run:

> nx migrate latest

If You Use Angular, Don't Use Ng Update

Please read https://nx.dev/latest/core-concepts/updating-nx to see why nx migrate is a more reliable way to migrate your workspace.

Storybook and Eslint

Depending on the versions of Storybook and Eslint you might have installed, migrating them to latest can result in a "broken" lock file (e.g., here https://github.com/nrwl/nx/issues/5671). If you see such an issue, you can remove node_modules and the lock file, reinstall the node modules again and the issue should be resolved.

We Can Help

If you see an exception while migrating, file an issue. Troubleshooting migration-related issues tends to be challenging, but we will do our best to unblock you.

[bopm]

This issue is here ~for a year at least~. That's the main reason users keep using ng update. Nx migrate behavior is inconsistent with original functionality, the scenario with migrate.json feels unfinished because after you run all migrations from it, it still sits in the repository and tends to be committed to it because it doesn't even added to .gitignore file.

[MichaelDeBoey]

@vsavkin When updating, .eslintrc.js files aren't updated while eslintrc.json files are

[FrozenPandaz]

When updating, .eslintrc.js files aren't updated while eslintrc.json files are

Sorry, that is intentional. .js files are much harder to migrate automatically. We highly recommend that you switch to using .json files if possible.

@bopm that issue has been opened for 9 days... we will take a look.

[MichaelDeBoey]

We highly recommend that you switch to using .json files if possible.

@FrozenPandaz We do this, but sometimes we need to have some conditional stuff, so we have no other choice. I understand it's harder, but using ASTs we should try to take .js configs into consideration I think.

[bopm]

@bopm that issue has been opened for 9 days... we will take a look.

Sorry, I meant actual expirience with nx migrate, from moment it appeared, it was offering less than actual ng update.

[bopm]

Also, @FrozenPandaz while I agree with the fact, that I may exaggerate the time of presence of the actual issue in the project, your edit of my comment to strike that out feels beyond passive-aggressive.

[ikemtz]

I've run the latest migration and everything looks correct, however, my nx tests are now failing. I use the readFirst function from the @nrwl/angular/testing package heavily in my unit tests. I'm now getting the error below on pretty much all of my unit tests.

I have a public repo along with a pull request that illustrates the issue: https://github.com/ikemtz/AngularMonoRepo/pull/260

Any help would be greatly appreciated!

Thanks, Isaac Martinez

FAIL   nurse-cron  apps/nurse-cron/src/app/modules/buildings-module/buildings-list/list.facade.spec.ts
  ● Test suite failed to run

    ReferenceError: jasmine is not defined

      2 | import { TestBed } from '@angular/core/testing';
      3 | import { HttpClient } from '@angular/common/http';
    > 4 | import { readFirst } from '@nrwl/angular/testing';
        | ^
      5 | import { EffectsModule } from '@ngrx/effects';
      6 | import { StoreModule, Store } from '@ngrx/store';
      7 | import { NxModule } from '@nrwl/angular';

      at setupEnvironment (../../node_modules/jasmine-marbles/bundles/jasmine-marbles.umd.js:386:5)
      at ../../node_modules/jasmine-marbles/bundles/jasmine-marbles.umd.js:393:1
      at ../../node_modules/jasmine-marbles/bundles/jasmine-marbles.umd.js:2:65
      at Object.<anonymous> (../../node_modules/jasmine-marbles/bundles/jasmine-marbles.umd.js:5:2)
      at ../../node_modules/@nrwl/angular/bundles/nrwl-angular-testing.umd.js:2:85
      at Object.<anonymous> (../../node_modules/@nrwl/angular/bundles/nrwl-angular-testing.umd.js:5:2)
      at Object.<anonymous> (src/app/modules/buildings-module/buildings-list/list.facade.spec.ts:4:1)
      at TestScheduler.scheduleTests (../../node_modules/@jest/core/build/TestScheduler.js:333:13)
      at runJest (../../node_modules/@jest/core/build/runJest.js:387:19)
      at _run10000 (../../node_modules/@jest/core/build/cli/index.js:408:7)
      at runCLI (../../node_modules/@jest/core/build/cli/index.js:261:3)

[mdunhem]

@ikemtz It's because the default Jest test runner is no longer Jasmine. As a temporary workaround you can specify testRunner: 'jasmine2' in the global jest.preset.js file. I ran into the same problem and am using this for now.

Ref: https://jestjs.io/blog/2021/05/25/jest-27#flipping-defaults

That said, I think the usage of jasmine-marbles in the @nrwl/angular/testing package should be reconsidered, or perhaps a way to use a Jest version rather than jasmine if using Jest rather than Karma/Jasmine?

[thutinavaneethreddy]

@ikemtz You can import readFirst from @nrwl/angular/testing/src/testing-utils instead and it works. import { readFirst } from '@nrwl/angular/testing/src/testing-utils';

[ikemtz]

Thank you all, I went with @thutinavaneethreddy approach. @mdunhem, I agree with you, the nx dependency on Jasmine should be reconsidered.

[draylegend]

I'm using { cold, hot } from '@nrwl/angular/testing' and it fails, too, with error jasmine is not defined. It'd be great to know, if there is a workaround. At least for the migration time. Or maybe there is a better approach to test observables without marbles?

[thutinavaneethreddy]

@vladimirdrayling - import { cold, hot } from 'jest-marbles';

Basically,

readFirst - import { readFirst } from '@nrwl/angular/testing/src/testing-utils'; hot,cold - import { cold, hot } from 'jest-marbles;

[draylegend]

@thutinavaneethreddy thank you for quick replay!

cold, hot seem to work, but got ahother error:

document is not defined
ReferenceError: document is not defined
    at Object._document [as useFactory] (D:\dev\web\tests\packages\platform-browser\src\browser.ts:36:16)
    at Object.factory (D:\dev\web\tests\packages\core\src\di\r3_injector.ts:504:42)
    at R3Injector.Object.<anonymous>.R3Injector.hydrate (D:\dev\web\tests\packages\core\src\di\r3_injector.ts:413:29)
    at R3Injector.Object.<anonymous>.R3Injector.get (D:\dev\web\tests\packages\core\src\di\r3_injector.ts:209:23)
    at R3Injector.Object.<anonymous>.R3Injector.get (D:\dev\web\tests\packages\core\src\di\r3_injector.ts:221:27)
    at injectInjectorOnly (D:\dev\web\tests\packages\core\src\di\injector_compatibility.ts:65:29)
    at Object.ɵɵinject (D:\dev\web\tests\packages\core\src\di\injector_compatibility.ts:85:58)
    at Object.DOMTestComponentRenderer_Factory [as factory] (D:\dev\web\tests\nx-test\node_modules\@angular\platform-browser-dynamic\bundles\platform-browser-dynamic-testing.umd.js:345:130)
    at R3Injector.Object.<anonymous>.R3Injector.hydrate (D:\dev\web\tests\packages\core\src\di\r3_injector.ts:413:29)
    at R3Injector.Object.<anonymous>.R3Injector.get (D:\dev\web\tests\packages\core\src\di\r3_injector.ts:209:23)

Maybe there is a soulution for this one? Thank you in advance!

[thutinavaneethreddy]

@vladimirdrayling Not sure but can you check if your testEnvironment is set to 'jsdom' in your jest preset or jest config file?

[draylegend]

@thutinavaneethreddy you're right! According to jest doc, id need to setup the testEnvironment.

Maybe it should be added to @nrwl/jest migration:

module.exports = {
  // ...
  testEnvironment: 'jsdom',
  // ...
}

[JoshMentzer]

Anyone else unable to use generators after upgrading to 12.5.7 and using the migration to standalone project.json files? At first I got the error about only supported with version 2 workspace; so I changed the version and ran the nx format. After that the migration was successful, but not can't use any generators at all - get 'the generate command requires to be run in an Angular project, but a project definition could not be found.'

[iamstiil]

Hey, I'm having an issue with running my tests after upgrading from 11.6.3 to 12.6.2.

I get the following error:

TypeError: apps/myapp/jest.setup.js: Property declarations[0] of VariableDeclaration expected node to be of a type ["VariableDeclarator"] but instead got undefined

      at validate (../../node_modules/@babel/types/lib/definitions/utils.js:130:11)
      at validator (../../node_modules/@babel/types/lib/definitions/utils.js:101:7)
      at Object.validate (../../node_modules/@babel/types/lib/definitions/utils.js:227:7)
      at validateField (../../node_modules/@babel/types/lib/validators/validate.js:24:9)
      at validate (../../node_modules/@babel/types/lib/validators/validate.js:17:3)
      at builder (../../node_modules/@babel/types/lib/builders/builder.js:38:27)
      at variableDeclaration (../../node_modules/@babel/types/lib/builders/generated/index.js:447:31)
      at NodePath._call (../../node_modules/@babel/traverse/lib/path/context.js:53:20)
      at NodePath.call (../../node_modules/@babel/traverse/lib/path/context.js:40:17)

I can't really pinpoint the issue. Inside of the jest.setup.js file I import whatwg-fetch, mock some modules with jest.mock and set some NEXT_PUBLIC_ environenment variables on process.env.

Anyone has any suggestions here?

[gremlin896]

I had this issue manifest itself after going through the migration process from 11.6.3 to 12.6.2 - where essentially class inheritance doesn't work as expected when testing with code coverage enabled.

Weirdly that issue has existed since angular v8, but it only has happened for me as soon as the migration was completed. I've managed to implement the workarounds listed in the linked issue which has helped, but it isn't ideal.

My guess is that it is related to the jest update 26.2.2 to 27.0.3 which was done as part of the migrations.

[DenysVuika]

It does upgrade the @angular/material but fails to upgrade @angular/cdk. Same for the @angular/flex-layout and some devDependencies as well. That results in the broken upgrade. Is that a known issue?

[github-actions[bot]]

This issue has been automatically marked as stale because it hasn't had any recent activity. It will be closed in 14 days if no further activity occurs. If we missed this issue please reply to keep it active. Thanks for being a part of the Nx community! 🙏

[LukasMachetanz]

Hi everyone!

Running the generated migrations (nx migrate latest) like nx migrate --run-migrations I get an error for the update-jest-preset-angular-8-4-0 migration as it cannot find jest.config.js. This makes sense as our nx-workspace has some libraries which are using karma and some which are using jest. I guess the libraries using karma cause the error. I am wondering how this problem could be solved. I guess it is not possible to run a migration for a specific library, right? Any help appreciated. Thanks.

[kaeh]

Hello there !

I've upgraded my angular project from 11 to 12 using nx migrate latest and i now have an issue with jest. Before upgrading everything worked but now jest exit with the following issue syntaxerror: unexpected token 'export' while parsing a d.ts file.

How can i fix that ?

Thanks in advance !

Edit : Ok i'm just stupid, my problem was with my npm lib which was badly build... sorry :D

[kasszz]

Hi everyone!

I've upgraded my nx monorepo from v11 to v12 using the nx migrate latest command, after some Jest problems I tried to run the applications again and I get these errors:

"BuilderInputSchema" schema is using the keyword "id" which its support is deprecated. Use "$id" for schema ID.
"BuilderOutputSchema" schema is using the keyword "id" which its support is deprecated. Use "$id" for schema ID.
Job name "..getProjectMetadata" does not exist.

Does anyone have any clue where they are coming from?

[rolandsbirons]

I'm having problem migrating React/NodeJS/NextJS NX.

  NX  Running migrations from 'migrations.json'

Running migration fix-page-dir-for-eslint
Cannot read property 'implementation' of undefined
/Users/rolandsbirons/Projects/xxx/node_modules/yargs/build/lib/yargs.js:1132
                throw err;
                ^

Error: Command failed: /var/folders/h9/ywh217qx35l56pjzrfv9np880000gn/T/tmp-63648-aR2sZRvFN4IZ/node_modules/.bin/tao migrate --run-migrations
    at checkExecSyncError (child_process.js:760:11)
    at Object.execSync (child_process.js:833:15)
    at Object.handler (/Users/rolandsbirons/Projects/xxx/node_modules/@nrwl/workspace/src/command-line/nx-commands.js:101:25)
    at Object.runCommand (/Users/rolandsbirons/Projects/xxx/node_modules/yargs/build/lib/command.js:196:48)
    at Object.parseArgs [as _parseArgs] (/Users/rolandsbirons/xxx/izsoles/node_modules/yargs/build/lib/yargs.js:1043:55)
    at Object.get [as argv] (/Users/rolandsbirons/Projects/xxx/node_modules/yargs/build/lib/yargs.js:986:25)
    at Object.initLocal (/Users/rolandsbirons/Projects/xxx/node_modules/@nrwl/cli/lib/init-local.js:25:79)
    at Object.<anonymous> (/Users/rolandsbirons/Projects/xxx/node_modules/@nrwl/cli/bin/nx.js:43:18)
    at Module._compile (/usr/local/lib/node_modules/nx/node_modules/v8-compile-cache/v8-compile-cache.js:192:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1101:10) {
  status: 1,
  signal: null,
  output: [ null, null, null ],
  pid: 63654,
  stdout: null,
  stderr: null
}

[github-actions[bot]]

This issue has been automatically marked as stale because it hasn't had any recent activity. It will be closed in 14 days if no further activity occurs. If we missed this issue please reply to keep it active. Thanks for being a part of the Nx community! 🙏

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