Nx: @angular-devkit/core/src/experimental/workspace blocks react or next application.

[muratbeser]

Hi when I use pnpm to create workspace nest application works but when I try to run any react related application I came cross with this error.

npm: working
pnpm: not working
yarn 2: not working

Cannot find module '@angular-devkit/core/src/experimental/workspace'
Require stack:
- /home/murat/Projects/blacksolutions/service-module/node_modules/.pnpm/@nrwl/[email protected]_36391234cc8ee784ed2def87da7d4058/node_modules/@nrwl/next/src/schematics/application/lib/add-project.js
- /home/murat/Projects/blacksolutions/service-module/node_modules/.pnpm/@nrwl/[email protected]_36391234cc8ee784ed2def87da7d4058/node_modules/@nrwl/next/src/schematics/application/application.js
- /home/murat/Projects/blacksolutions/service-module/node_modules/.pnpm/@angular-devkit/[email protected]/node_modules/@angular-devkit/schematics/tools/export-ref.js
- /home/murat/Projects/blacksolutions/service-module/node_modules/.pnpm/@angular-devkit/[email protected]/node_modules/@angular-devkit/schematics/tools/index.js
- /home/murat/Projects/blacksolutions/service-module/node_modules/.pnpm/@nrwl/[email protected]/node_modules/@nrwl/tao/src/commands/generate.js
- /home/murat/Projects/blacksolutions/service-module/node_modules/.pnpm/@nrwl/[email protected]/node_modules/@nrwl/tao/index.js
- /home/murat/Projects/blacksolutions/service-module/node_modules/.pnpm/@nrwl/[email protected]/node_modules/@nrwl/cli/lib/init-local.js
- /home/murat/Projects/blacksolutions/service-module/node_modules/.pnpm/@nrwl/[email protected]/node_modules/@nrwl/cli/bin/nx.js

Steps to Reproduce

pnpx create-nx-workspace --preset empty
"pnpx add @nrwl/next @nrwl/nest @nrwl/react ..."
rm -rf node_modules
pnpm install

my package.json

{
  "name": "service-module",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "nx": "nx",
    "start": "nx serve",
    "build": "nx build",
    "test": "nx test",
    "lint": "nx workspace-lint && nx lint",
    "e2e": "nx e2e",
    "affected:apps": "nx affected:apps",
    "affected:libs": "nx affected:libs",
    "affected:build": "nx affected:build",
    "affected:e2e": "nx affected:e2e",
    "affected:test": "nx affected:test",
    "affected:lint": "nx affected:lint",
    "affected:dep-graph": "nx affected:dep-graph",
    "affected": "nx affected",
    "format": "nx format:write",
    "format:write": "nx format:write",
    "format:check": "nx format:check",
    "update": "nx migrate latest",
    "workspace-schematic": "nx workspace-schematic",
    "dep-graph": "nx dep-graph",
    "help": "nx help"
  },
  "private": true,
  "devDependencies": {
    "@babel/core": "^7.12.9",
    "@babel/preset-env": "^7.12.7",
    "@babel/preset-react": "7.9.4",
    "@babel/preset-typescript": "7.12.7",
    "@cypress/webpack-preprocessor": "^5.4.11",
    "@nestjs/schematics": "^7.0.0",
    "@nestjs/testing": "^7.0.0",
    "@nrwl/cli": "10.4.4",
    "@nrwl/cypress": "10.4.4",
    "@nrwl/eslint-plugin-nx": "10.4.4",
    "@nrwl/jest": "10.4.4",
    "@nrwl/nest": "^10.4.4",
    "@nrwl/next": "^10.4.4",
    "@nrwl/node": "10.4.4",
    "@nrwl/react": "^10.4.4",
    "@nrwl/storybook": "^10.4.4",
    "@nrwl/tao": "10.4.4",
    "@nrwl/web": "10.4.4",
    "@nrwl/workspace": "10.4.4",
    "@testing-library/react": "11.1.2",
    "@types/jest": "26.0.8",
    "@types/node": "^14.14.10",
    "@types/react": "16.9.56",
    "@types/react-dom": "16.9.9",
    "@typescript-eslint/eslint-plugin": "4.3.0",
    "@typescript-eslint/parser": "4.3.0",
    "babel-jest": "26.2.2",
    "babel-loader": "^8.2.2",
    "cypress": "^6.0.0",
    "dotenv": "^8.2.0",
    "eslint": "^7.14.0",
    "eslint-config-prettier": "6.0.0",
    "eslint-plugin-cypress": "^2.10.3",
    "eslint-plugin-import": "2.22.1",
    "eslint-plugin-jsx-a11y": "6.4.1",
    "eslint-plugin-react": "7.21.5",
    "eslint-plugin-react-hooks": "^4.2.0",
    "jest": "26.2.2",
    "next": "^10.0.3",
    "prettier": "^2.2.1",
    "ts-jest": "26.4.0",
    "ts-node": "~9.0.0",
    "typescript": "~4.1.2",
    "webpack": "^5.9.0"
  },
  "dependencies": {
    "@nestjs/common": "^7.0.0",
    "@nestjs/core": "^7.0.0",
    "@nestjs/platform-express": "^7.0.0",
    "document-register-element": "1.13.1",
    "react": "17.0.1",
    "react-dom": "17.0.1",
    "reflect-metadata": "^0.1.13",
    "rxjs": "~6.5.5",
    "tslib": "^2.0.0"
  },
  "pnpm": {
    "overrides": {
      "eslint-plugin-react-hooks": "^4.2.0",
      "@cypress/webpack-preprocessor": "^5.4.11"
    }
  }
}

node_modules/@nrwl/tao/src/compat/compat.js has this content in it. according to this https://github.com/nrwl/nx/issues/4100#issuecomment-732371603

Angular dev-kit moved workspace from experimental to src folder

/* eslint-disable */
const Module = require('module');
const originalRequire = Module.prototype.require;
Module.prototype.require = function () {
    const result = originalRequire.apply(this, arguments);
    if (arguments[0].startsWith('@angular-devkit/core')) {
        const Workspace = originalRequire.apply(this, [
            `@angular-devkit/core/src/experimental/workspace`,
        ]).Workspace;
        Workspace._workspaceFileNames = [
            'workspace.json',
            ...Workspace._workspaceFileNames,
        ];
        const core = originalRequire.apply(this, [
            `@angular-devkit/core/src/workspace/core`,
        ]);
        core._test_addWorkspaceFile('workspace.json', core.WorkspaceFormat.JSON);
    }
    return result;
};
try {
    require('@angular-devkit/build-angular/src/utils/version').Version.assertCompatibleAngularVersion = () => { };
}
catch (e) { }
try {
    require('@angular-devkit/build-angular/src/utils/version').assertCompatibleAngularVersion = () => { };
}
catch (e) { }
//# sourceMappingURL=compat.js.map

[muratbeser]

I read out the package-lock.json file and locked the versions of

    "@angular-devkit/architect": "0.1001.7",
    "@angular-devkit/core": "10.1.7",
    "@angular-devkit/schematics": "10.1.7"

and next application works.

[lgastler]

Hi, I have encountered the same error.
Cannot find module '@angular-devkit/core/src/experimental/workspace'.

For me, however, the error occurred when executing a workspace-schematic. Using Version "10.1.7" for both @angular-devkit/core and @angular-devkit/schematics also solved the problem on my side 👍

[KyleBastien]

I'm seeing the same error here when migrating from Nx 10.2 to Nx 11. I added a resolution to my package.json to point @angular-devkit/core to 10.2.0 while running the migration, and then it worked. I then was able to remove this resolution and everything seems happy so far.

[muratbeser]

I think it is not okay to have hard coded dependency checkin the code, every package manager has different approach to manage their packages, may be depending on package manager we can use npm / pnpm ls to search package or if it exists.

[cmwhited]

Running into the same issue migrating from 10.4.5 -> 11.0.1. Will try your solution @KyleBastien

[madipta]

I'm seeing the same error here when migrating from Nx 10.2 to Nx 11. I added a resolution to my package.json to point @angular-devkit/core to 10.2.0 while running the migration, and then it worked. I then was able to remove this resolution and everything seems happy so far.

thanks! works for me