[NX 20] Problems with empty workspace

[gperdomor]

Current Behavior

Hi everyone... First things first... Congrats for the new release 🥳

Im creating this issue because I'm trying to play with Nx 20.0.0-rc.0 and I got several problems running npx nx add @nx/nest, npx nx add @nx/next and npx nx add @nx/react

Basically all commands return mostly the same:

npx nx add @nx/react

✔ Installing @nx/react@20.0.0-rc.0...

 NX  Generating @nx/react:init

 NX   The "@nx/react" plugin doesn't yet support the existing TypeScript setup

We're working hard to support the existing TypeScript setup with the "@nx/react" plugin. We'll soon release a new version of Nx with support for it.

✖ Initializing @nx/react...

Error: Command failed: npx nx g @nx/react:init --keepExistingVersions --updatePackageScripts
    at genericNodeError (node:internal/errors:983:15)
    at wrappedFn (node:internal/errors:537:14)
    at checkExecSyncError (node:child_process:890:11)
    at execSync (node:child_process:962:15)
    ...
    ...
    ...

 NX   Failed to initialize @nx/react. Please check the error above for more details.

Creating Plugins

Also I ran npx nx add @nx/plugin which not throws errors during the install, but when I tried to create a new plugin I got the same error

Executing task: npx nx generate @nx/plugin:plugin --directory=plugin/my-plugin --no-interactive --dry-run 

 NX  Generating @nx/plugin:plugin

 NX   The "@nx/plugin:plugin" generator doesn't yet support the existing TypeScript setup

We're working hard to support the existing TypeScript setup with the "@nx/plugin:plugin" generator. We'll soon release a new version of Nx with support for it.

Expected Behavior

Considering that not all plugins are supported with the new typescript plugin, maybe the plugin should not be included as default 🤔

Also maybe it's a good idea include in the docs which plugins/executors/generators works with the new preset

GitHub Repo

No response

Steps to Reproduce

1. Create empty workspace
2. Execute npx nx add @nx/next

Nx Report

NX Report complete - copy this into the issue template

Node : 22.9.0 OS : darwin-x64 Native Target : x86_64-macos npm : 10.8.3

nx (global) : 19.8.3 nx : 20.0.0-rc.0 @nx/js : 20.0.0-rc.0 @nx/jest : 20.0.0-rc.0 @nx/eslint : 20.0.0-rc.0 @nx/workspace : 20.0.0-rc.0 @nx/devkit : 20.0.0-rc.0 @nx/nest : 20.0.0-rc.0 @nx/next : 20.0.0-rc.0 @nx/node : 20.0.0-rc.0 @nx/plugin : 20.0.0-rc.0 @nx/react : 20.0.0-rc.0 @nx/web : 20.0.0-rc.0 @nx/webpack : 20.0.0-rc.0 typescript : 5.5.4

Registered Plugins: @nx/js/typescript

Failure Logs

No response

Package Manager Version

npm 10.8.3

Operating System

• [x] macOS
• [ ] Linux
• [ ] Windows
• [ ] Other (Please specify)

Additional Information

No response

[Crewting-Niklas]

Same problem on my side. I used following commands to create a new workspace:

Steps to reproduce: npx create-nx-workspace --pm pnpm pnpm i -D -w @nx/react nx g @nx/react:application app --directory app

Console Report: NX Generating @nx/react:application

✔ Which stylesheet format would you like to use? · @emotion/styled ✔ Would you like to add React Router to this application? (y/N) · false ✔ Which E2E test runner would you like to use? · cypress ✔ Which bundler do you want to use to build the application? · vite

NX The "@nx/react:application" generator doesn't yet support the existing TypeScript setup

We're working hard to support the existing TypeScript setup with the "@nx/react:application" generator. We'll soon release a new version of Nx with support for it.

[chioarub]

Same problem when using @nx/angular.

[madelk]

Also getting a problem that might be related after going to NX 20

 NX   Cannot read properties of undefined (reading 'projects')

TypeError: Cannot read properties of undefined (reading 'projects')
    at getProjectConfiguration (/mypath/node_modules/.pnpm/@ns3+nx-core@5.4.0_nx@20.0.0_@swc-node+register@1.9.2_@swc+core@1.5.7_@swc+helpers@0.5.11__@s_lglvwxjqsajdvzilv64lux6rua/node_modules/@ns3/nx-core/src/utils/get-project-configuration.js:6:30)
    at /mypath/node_modules/.pnpm/@ns3+nx-serverless@5.4.0_@babel+traverse@7.24.5_@swc-node+register@1.9.2_@swc+core@1.5.7_@swc_2s7xprqvnfumnnfe7pzlv3jf5m/node_modules/@ns3/nx-serverless/src/executors/sls/executor.js:13:67
    at Generator.next (<anonymous>)
    at /mypath/node_modules/.pnpm/tslib@2.6.2/node_modules/tslib/tslib.js:169:75
    at new Promise (<anonymous>)
    at Object.__awaiter (/mypath/node_modules/.pnpm/tslib@2.6.2/node_modules/tslib/tslib.js:165:16)
    at runExecutor (/mypath/node_modules/.pnpm/@ns3+nx-serverless@5.4.0_@babel+traverse@7.24.5_@swc-node+register@1.9.2_@swc+core@1.5.7_@swc_2s7xprqvnfumnnfe7pzlv3jf5m/node_modules/@ns3/nx-serverless/src/executors/sls/executor.js:10:20)
    at runExecutorInternal (/mypath/node_modules/.pnpm/nx@20.0.0_@swc-node+register@1.9.2_@swc+core@1.5.7_@swc+helpers@0.5.11__@swc+types@0.1.7_type_acywtu53f4pqbt6pniy2gi3ee4/node_modules/nx/src/command-line/run/run.js:98:19)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async /mypath/node_modules/.pnpm/nx@20.0.0_@swc-node+register@1.9.2_@swc+core@1.5.7_@swc+helpers@0.5.11__@swc+types@0.1.7_type_acywtu53f4pqbt6pniy2gi3ee4/node_modules/nx/src/command-line/run/run.js:176:44

I assumed it's related because in this function

function getProjectConfiguration(context) {
    return context.workspace.projects[context.projectName];
}

workspace is undefined

[baoletrangia]

same problem when adding @nx/next and @nx/nest to empty workspace

[leosvelperez]

Thanks for reporting this!

The new TS behavior is enabled by default when using the ts preset. As you've discovered, it's not yet compatible with most of the plugins. As of right now, it can be used with @nx/js projects. As the error message says, we're working to make all Nx first-party plugins compatible with it.

This doesn't mean you have to be blocked. As mentioned, this is only the behavior when using the ts preset. There are different presets for "empty" workspaces, and that's only one of them. As mentioned in Nx v20 blog post announcement, if you need to use other plugins while they don't support the new TS setup, please create an empty workspace with the apps preset: npx -y create-nx-workspace@latest --preset=apps.

[linktogo]

same issue when we do an migration command

` nx migrate latest --interactive

NX Its time to update Nx 🎉

Your repository uses a higher version of Nx (18.3.3) than your global CLI version (16.10.0) For more information, see https://nx.dev/more-concepts/global-nx

Failed to install the latest version of the migration script. Using the current version. yarn run v1.22.19 $ node --max-old-space-size=20384 ./node_modules/nx/bin/nx.js _migrate latest --interactive ✔ Would you like remote caching to make your build faster? · skip Fetching meta data about packages. It may take a few minutes. Fetching nx@20.0.0 Fetching @nx/jest@20.0.0 Fetching @nx/js@20.0.0 Fetching @nx/web@20.0.0 Fetching @nrwl/web@20.0.0 Fetching @nx/eslint@20.0.0 Fetching @nx/cypress@20.0.0 Fetching @nx/storybook@20.0.0 Fetching @nx/eslint-plugin@20.0.0 Fetching @nx/node@20.0.0 Fetching @nx/workspace@20.0.0 Fetching @nx/nest@20.0.0 Fetching @nx/angular@20.0.0 Fetching @nx/webpack@20.0.0 Fetching @nx/jest@20.0.0

NX The migrate command failed.

NX Command failed: npm install @nrwl/web@20.0.0

npm error code ETARGET npm error notarget No matching version found for @nrwl/web@20.0.0. npm error notarget In most cases you or one of your dependencies are requesting npm error notarget a package version that doesn't exist. `

[leosvelperez]

@linktogo that's unrelated. There's no v20 for @nrwl/web package (or any @nrwl/* packages). This was announced in the Nx v20 blog post announcement. The migrations should take care of it, so please report that in a separate issue with more detailed information on how to reproduce it.

To unblock yourself, you can swap it with @nx/web before migrating. You can see the migration docs for more info.

[gperdomor]

@leosvelperez Hi buddy... Thanks for the reply... Considering that right now, most of the plugins are affected, can you share a roadmap about how that migration will be handled? Maybe a compatibility matrix can be a good option to help people to decide which preset is better for their projects

[eduard-malakhov]

Thanks for reporting this!

The new TS behavior is enabled by default when using the ts preset. As you've discovered, it's not yet compatible with most of the plugins. As of right now, it can be used with @nx/js projects. As the error message says, we're working to make all Nx first-party plugins compatible with it.

This doesn't mean you have to be blocked. As mentioned, this is only the behavior when using the ts preset. There are different presets for "empty" workspaces, and that's only one of them. As mentioned in Nx v20 blog post announcement, if you need to use other plugins while they don't support the new TS setup, please create an empty workspace with the apps preset: npx -y create-nx-workspace@latest --preset=apps.

Thank you for your the explanation. What would be the correct way to disable the ts preset in an existing workspace? I'd rather avoid creating a new workspace just to move all the stuff over from the existing workspace.

[jaysoo]

Hi @gperdomor, thanks for reporting this issue. As @leosvelperez mentioned, using --preset=apps is the way to go to create an empty workspace in the previous style.

npx create-nx-workspace --preset=apps

The stacks, such as Angular, React, Vue, Node, continue to function like they did prior to v20, and any existing "integrated" workspaces will continue to function the same way in the future. If one of these stacks match what you are using, it is recommended for you to choose them over None.

Here's a longer explanation of the error.

Previous to v20, when you chose None (i.e. empty workspace) we prompted for package-based vs integrated monorepo. The vast majority of users did not understand this distinction. On top of that, the "integrated" style doesn't use standard features that most modern JS monorepos (Nx or not) are using, such as npm/yarn/pnpm/bun workspaces and TS project references. For those two reasons, we decided, in v20, to create new JS monorepos using the modern setup, which brings them in line with latest best practices, as well as performance improvements.

The @nx/js plugin is fully compatible with the new setup, and continues to support the "integrated" style in v20 and into the future. The other plugins, such as @nx/angular and @nx/react were never fully compatible with the new setup (again, what we used to call "package-based"), and they do cause issues later down the line. It was therefore decided to temporarily guard against them rather than let users discover the issues later on. I want to reiterate that they were always incompatible prior to v20, we're just failing earlier now.

As for the timeline for compatibility for other stacks/plugins, we're actively working on that now. We're targeting v20.1 to bring full compatibility, which is around late October/early November.

[jaysoo]

@eduard-malakhov

Thank you for your the explanation. What would be the correct way to disable the ts preset in an existing workspace? I'd rather avoid creating a new workspace just to move all the stuff over from the existing workspace.

If the workspace is new, we recommend you re-create it using --preset=apps. However, if you need to convert the workspace back to the prevoius, "integrated", style, then you need to:

1. Remove the usage of npm/yarn/pnpm/bun workspaces (i.e. delete workspaces entry in package.json or remove pnpm-workspaces.yaml file)
2. Remove references entry in the root tsconfig.json

Again, if you can we recommend that you use --preset=apps in a new workspace. You can also nx import your projects from the existing workspace to the new one.

[jaysoo]

@madelk This issue in unrelated, and seems like the @ns3/nx-serverless plugin is using an API that was deprecated back in v17, and removed in v20. I would create an issue on their repo.

context.workspaces.projects is the problem here, and it was been replaced by context.projectsConfigurations.projects in v17.

[gperdomor]

Thank you @jaysoo for the clarification... I'm planning to build a component library with Lit so I think I can continue with v20, and create the storybook later when v20.1 is available 👍🏻

[o-glethorpe]

How can you guys push a new update and have everything stop working like that? I understand if it happens with third-party plugins, but having this happen with plugins maintained by the NX team itself is unacceptable. Everyone who creates a new workspace has to waste time coming down here to find this hack.

[ChazUK]

Is there plans to offer a migration tool when support is added to @nx/angular @nx/react? Or is there a timeline on when this will be done?

[vzsolt1981]

As for the timeline for compatibility for other stacks/plugins, we're actively working on that now. We're targeting v20.1 to bring full compatibility, which is around late October/early November.

With v20.1 and nx/angular the issue still persists.

[gperdomor]

@vzsolt1981 yes, I saw PR for react and plugins packages but are not merged... I need the last one :(...

I know that the folks are working hard to fix all the compatibility issues but it's worth to say that the release process of this 20 version have been a little chaotic... In any case let's hope that everything can be solved as soon as posible 🙏🏻

[jaysoo]

The plugins PR has been merged, and the React one should be landing this week. After that will be Angular, Vue, and Node.

[oshliaer]

This doesn't seem quick and easy.

How can I know which plugins support which version? And which monorepo downgrade strategy should I choose?

It would be great to have documentation for this. As I can see in the matrix of versions that's not full true https://nx.dev/nx-api/angular/documents/angular-nx-version-matrix

[manpreet-compro]

Also the matrix I think is for Angular at the moment only. Such a matrix can benefit other plugins also. I am looking for the 'Nuxt' versions, currently not able to create new workspace

[adlion]

I tired to create a new project and is failing every time I use angular

What happened to this tool?

[gperdomor]

@adlion please read this comment… https://github.com/nrwl/nx/issues/28322#issuecomment-2402623507

Angular plugin is not updated to support the new typescript solution/workspace, you need to use the old style in order to use angular the plugin