Yarn PnP app builds fail loading @angular/compiler-cli

[johncrim]

🐞 Bug report

Command (mark with an x)

• new
• build
• serve
• test
• e2e
• generate
• add
• update
• lint
• extract-i18n
• run
• config
• help
• version
• doc

Is this a regression?

No - Yarn PnP support seems newish but being tracked in #16980

Description

I attempted to get a minimal angular build working using ng 13.1 and Yarn PnP, but I ran into the same problem on minimal new projects as on our large projects. I reported the ng-packagr issue #2214 that is preventing library builds, and I'm also seeing an equivalent issue that is preventing app builds:

❯ yarn ng build myapp                      
An unhandled exception occurred: Cannot find package '@angular/compiler-cli' imported from src\ng13-yarn-pnp\.yarn\unplugged\@angular-devkit-build-angular-virtual-0b6cfeb8e3\node_modules\@angular-devkit\build-angular\src\utils\load-esm.js
Did you mean to import @angular-compiler-cli-virtual-759efba812/node_modules/@angular/compiler-cli/bundles/index.js?

In both ng-packagr and angular-devkit load-esm.ts the same pattern is failing to load '@angular/compiler-cli' when run within Yarn PnP.

🔬 Minimal Reproduction

git checkout [email protected]:johncrim/ng13-yarn-pnp.git
yarn install
yarn ng build myapp

🔥 Exception or Error

[error] Error [ERR_MODULE_NOT_FOUND]: Cannot find package '@angular/compiler-cli' imported from src\ng13-yarn-pnp\.yarn\unplugged\@angular-devkit-build-angular-virtual-0b6cfeb8e3\node_modules\@angular-devkit\build-angular\src\utils\load-esm.js
Did you mean to import @angular-compiler-cli-virtual-759efba812/node_modules/@angular/compiler-cli/bundles/index.js?
    at new NodeError (node:internal/errors:371:5)
    at packageResolve (node:internal/modules/esm/resolve:884:9)
    at moduleResolve (node:internal/modules/esm/resolve:929:18)
    at defaultResolve (node:internal/modules/esm/resolve:1044:11)
    at ESMLoader.resolve (node:internal/modules/esm/loader:422:30)
    at ESMLoader.getModuleJob (node:internal/modules/esm/loader:222:40)
    at ESMLoader.import (node:internal/modules/esm/loader:276:22)
    at importModuleDynamically (node:internal/modules/cjs/loader:1041:29)
    at importModuleDynamicallyWrapper (node:internal/vm/module:437:21)
    at importModuleDynamically (node:vm:381:46)

🌍 Your Environment

Angular CLI: 13.1.2
Node: 16.12.0
Package Manager: yarn 3.1.1
OS: win32 x64

Angular: 13.1.1
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1301.2 (cli-only)
@angular-devkit/build-angular   13.1.2
@angular-devkit/core            13.1.2 (cli-only)
@angular-devkit/schematics      13.1.2 (cli-only)
@angular/cli                    13.1.2
@schematics/angular             13.1.2 (cli-only)
ng-packagr                      13.1.2
rxjs                            7.4.0
typescript                      4.5.4

Related issues:

• Yarn PnP Support Status #16980
• Can't build ng lib while using Yarn PnP ng-packagr/ng-packagr#2214

[alan-agius4]

Duplicate of #22386

[johncrim]

Thank you @alan-agius4 - I apologize for not finding the dup before filing.

FYI, on the same app/repo, if I:

yarn set version canary
yarn install
yarn ng build myapp

I get another error (but it looks like the issue I originally reported is no longer!):

⠙ Generating browser application bundles (phase: setup)...C:\src\github\ng13-yarn-pnp\.yarn\__virtual__\@ngtools-webpack-virtual-627216669f\0\cache\@ngtools-webpack-npm-13.1.2-ad65a84d06-459339425c.zip\node_modules\@ngtools\webpack\src\ngcc_processor.js:217
        throw new Error(`Cannot locate the 'node_modules' directory.`);
              ^

Error: Cannot locate the 'node_modules' directory.
    at NgccProcessor.findNodeModulesDirectory (C:\src\github\ng13-yarn-pnp\.yarn\__virtual__\@ngtools-webpack-virtual-627216669f\0\cache\@ngtools-webpack-npm-13.1.2-ad65a84d06-459339425c.zip\node_modules\@ngtools\webpack\src\ngcc_processor.js:217:15)
    at new NgccProcessor (C:\src\github\ng13-yarn-pnp\.yarn\__virtual__\@ngtools-webpack-virtual-627216669f\0\cache\@ngtools-webpack-npm-13.1.2-ad65a84d06-459339425c.zip\node_modules\@ngtools\webpack\src\ngcc_processor.js:54:43)
    at initializeNgccProcessor (C:\src\github\ng13-yarn-pnp\.yarn\__virtual__\@ngtools-webpack-virtual-627216669f\0\cache\@ngtools-webpack-npm-13.1.2-ad65a84d06-459339425c.zip\node_modules\@ngtools\webpack\src\ivy\plugin.js:65:23)
    at C:\src\github\ng13-yarn-pnp\.yarn\__virtual__\@ngtools-webpack-virtual-627216669f\0\cache\@ngtools-webpack-npm-13.1.2-ad65a84d06-459339425c.zip\node_modules\@ngtools\webpack\src\ivy\plugin.js:142:57
    at Hook.eval [as call] (eval at create (C:\src\github\ng13-yarn-pnp\.yarn\cache\tapable-npm-2.2.1-8cf5ff3039-3b7a1b4d86.zip\node_modules\tapable\lib\HookCodeFactory.js:19:10), <anonymous>:20:1)
    at Hook.CALL_DELEGATE [as _call] (C:\src\github\ng13-yarn-pnp\.yarn\cache\tapable-npm-2.2.1-8cf5ff3039-3b7a1b4d86.zip\node_modules\tapable\lib\Hook.js:14:14)
    at Compiler.newCompilation (C:\src\github\ng13-yarn-pnp\.yarn\__virtual__\webpack-virtual-e45eefd484\0\cache\webpack-npm-5.65.0-da658c1b49-221ab8ccd4.zip\node_modules\webpack\lib\Compiler.js:1054:30)
    at C:\src\github\ng13-yarn-pnp\.yarn\__virtual__\webpack-virtual-e45eefd484\0\cache\webpack-npm-5.65.0-da658c1b49-221ab8ccd4.zip\node_modules\webpack\lib\Compiler.js:1099:29
    at eval (eval at create (C:\src\github\ng13-yarn-pnp\.yarn\cache\tapable-npm-2.2.1-8cf5ff3039-3b7a1b4d86.zip\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:31:1)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}