nx cannot find specific libraries in node_modules folder like zone.js

I have a nx monorepo with one application and one library. All defaults and all generated using the NX cli. Now the weird thing is, is that my college has no issues running the application, but on my machine, using the exact same code, it doesn't work at all.

So, when I do nx serve my-app I get the following

> nx run my-app:serve:development

Localization (`localize` option) has been disabled. The development server only supports localizing a single locale per build.
⠋ Building...
Browserslist: caniuse-lite is outdated. Please run:
npx update-browserslist-db@latest
Application bundle generation failed. [4.332 seconds]

✘ [ERROR] Could not resolve "zone.js"

angularolyfills:angularolyfills:2:7:
2 │ import 'zone.js';
╵ ~~~~~~~~~

The Yarn Plug'n'Play manifest forbids importing "zone.js" here because it's not listed as a dependency of this package:

../../.pnp.cjs:37:31:
37 │ "packageDependencies": [\
╵ ~~

You can mark the path "zone.js" as external to exclude it from the bundle, which will remove this error and leave the unresolved path in the bundle.


✘ [ERROR] Could not resolve "@angular/localize/init"

angularolyfills:angularolyfills:3:7:
3 │ import '@angular/localize/init';(globalThis.$localize ??= {}).local...
╵ ~~~~~~~~~~~~~~~~~~~~~~~~

The Yarn Plug'n'Play manifest forbids importing "@angular/localize" here because it's not listed as a dependency of this package:

../../.pnp.cjs:37:31:
37 │ "packageDependencies": [\
╵ ~~

You can mark the path "@angular/localize/init" as external to exclude it from the bundle, which will remove this error and leave the unresolved path in the bundle.


✘ [ERROR] Can't find stylesheet to import.
╷
1 │ @use 'scss-reset/reset';
│ ^^^^^^^^^^^^^^^^^^^^^^^
╵
apps/my-app/src/styles.scss 1:1 root stylesheet [plugin angular-sass]

angular:styles/global:styles:1:8:
1 │ @import 'apps/my-app/src/styles.scss';
╵ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~


✘ [ERROR] Can't find stylesheet to import.
╷
1 │ ┌ @use '@angular/material' as mat with (
2 │ │ $theme-ignore-duplication-warnings: true
3 │ │ );
│ └─^
╵
apps/my-app/src/styles/themes/mixins.scss 1:1 @use
apps/my-app/src/styles/themes/theme.scss 1:1 root stylesheet [plugin angular-sass]

angular:styles/global:theme:1:8:
1 │ @import 'apps/my-app/src/styles/themes/theme.scss';
╵ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~


✘ [ERROR] Can't find stylesheet to import.
╷
1 │ ┌ @use '@angular/material' as mat with (
2 │ │ $theme-ignore-duplication-warnings: true
3 │ │ );
│ └─^
╵
apps/my-app/src/styles/themes/mixins.scss 1:1 @use
apps/my-app/src/styles/themes/theme.acc.scss 1:1 root stylesheet [plugin angular-sass]

angular:styles/global:theme.acc:1:8:
1 │ @import 'apps/my-app/src/styles/themes/theme.acc.scss';
╵ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~


Watch mode enabled. Watching for file changes...


For example, it starts complaining about zone.js. Not sure why, as the folder ./node_modules/zone.js exists. I get the impression that there is something specific on my computer that causes this, as I have another nx monorepo with similar issues. When I create a monorepo from scratch I have no issues. Any suggestions what might be the cause of this?

Node Version: 18.20.2 NPM Version: 10.5.0 NX Version: 18.1.3

I don't know what happend, so I was hoping someone recognizes?

Continue reading...