angular-builder:browser-esbuild fails on angular material & scss imports #24271

LorinRenodeyn · 2022-11-17T21:02:04Z

Command

build

Is this a regression?

Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

Using the experimental esbuild in Angular 15 together with Angular/Materialv15 fails on importing some of the global scss files (and) when it encouters @use statements in those files.

When running the build using the normal angular browser builder, everything runs fine.

Minimal Reproduction

So running ng build works fine when using the regular builder @angular-devkit/build-angular:browser.
When switching to @angular-devkit/build-angular:browser-esbuild, it borks on the scss files.

Console output:

> ng build

The esbuild browser application builder ('browser-esbuild') is currently experimental.
The 'budgets' option is currently unsupported by this experimental builder and will be ignored.
The 'extractLicenses' option is currently unsupported by this experimental builder and will be ignored.
The 'progress' option is currently unsupported by this experimental builder and will be ignored.
The 'inlineStyleLanguage' option is currently unsupported by this experimental builder and will be ignored.
✘ [ERROR] [plugin angular-sass] Can't find stylesheet to import.
  ╷
2 │ @use '@material/button/button' as mdc-button;
  │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  node_modules/.pnpm/@angular+material@15.0.0_reorc52cjeztj6pvir7dgsjtay/node_modules/@angular/material/button/_button-theme.scss 2:1               @use
  node_modules/.pnpm/@angular+material@15.0.0_reorc52cjeztj6pvir7dgsjtay/node_modules/@angular/material/core/density/private/_all-density.scss 2:1  @forward
  @angular/_index.scss 18:1                                                                                                                         @use
  src/app/shared/typography/typography.component.scss 1:1                                                                                           root stylesheet


✘ [ERROR] [plugin angular-sass] Can't find stylesheet to import.
  ╷
2 │ @use '@material/button/button' as mdc-button;
  │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  node_modules/.pnpm/@angular+material@15.0.0_reorc52cjeztj6pvir7dgsjtay/node_modules/@angular/material/button/_button-theme.scss 2:1               @use
  node_modules/.pnpm/@angular+material@15.0.0_reorc52cjeztj6pvir7dgsjtay/node_modules/@angular/material/core/density/private/_all-density.scss 2:1  @forward
  @angular/_index.scss 18:1                                                                                                                         @use
  src/variables.scss 1:1                                                                                                                            @import
  src/app/shared/button/button.component.scss 1:9                                                                                                   root stylesheet


✘ [ERROR] [plugin angular-sass] Can't find stylesheet to import.
  ╷
2 │ @use '@material/button/button' as mdc-button;
  │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  node_modules/.pnpm/@angular+material@15.0.0_reorc52cjeztj6pvir7dgsjtay/node_modules/@angular/material/button/_button-theme.scss 2:1               @use
  node_modules/.pnpm/@angular+material@15.0.0_reorc52cjeztj6pvir7dgsjtay/node_modules/@angular/material/core/density/private/_all-density.scss 2:1  @forward
  @angular/_index.scss 18:1                                                                                                                         @use
  src/theme.scss 1:1                                                                                                                                root stylesheet

    angular:styles/global:styles:2:8:
      2 │ @import 'src/theme.scss';
        ╵         ~~~~~~~~~~~~~~~~


 ELIFECYCLE  Command failed with exit code 1.

theme.scss is located right at the root of the src folder, and starts off like this:

@use '@angular/material' as mat;
@import 'typography';
/* material theme definitions here */

Part of angular.json:

"build": {
	"builder": "@angular-devkit/build-angular:browser-esbuild",
	"options": {
		"outputPath": "dist/new-agent-portal",
		"index": "src/index.html",
		"main": "src/main.ts",
		"polyfills": "src/polyfills.ts",
		"tsConfig": "tsconfig.app.json",
		"inlineStyleLanguage": "scss",
		"assets": ["src/favicon.ico", "src/assets"],
		"styles": ["src/styles.scss", "src/theme.scss"],
		"scripts": [],
		"stylePreprocessorOptions": {
			"includePaths": ["node_modules", "src"]
		}
	},

Package.json:

{
  "name": "new-agent-portal",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test",
    "docs:json": "compodoc -p ./tsconfig.json -e json -d .",
    "storybook": "pnpm run docs:json && storybook dev -p 6006",
    "build-storybook": "pnpm run docs:json && storybook build",
    "prepare": "husky install",
    "lint": "ng lint"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^15.0.0",
    "@angular/cdk": "15.0.0",
    "@angular/common": "^15.0.0",
    "@angular/compiler": "^15.0.0",
    "@angular/core": "^15.0.0",
    "@angular/forms": "^15.0.0",
    "@angular/material": "15.0.0",
    "@angular/platform-browser": "^15.0.0",
    "@angular/platform-browser-dynamic": "^15.0.0",
    "@angular/router": "^15.0.0",
    "@ngx-translate/core": "^14.0.0",
    "@ngx-translate/http-loader": "^7.0.0",
    "rxjs": "~7.5.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^15.0.0",
    "@angular-eslint/builder": "14.3.0",
    "@angular-eslint/eslint-plugin": "14.3.0",
    "@angular-eslint/eslint-plugin-template": "14.3.0",
    "@angular-eslint/schematics": "14.3.0",
    "@angular-eslint/template-parser": "14.3.0",
    "@angular/cli": "~15.0.0",
    "@angular/compiler-cli": "^15.0.0",
    "@compodoc/compodoc": "^1.1.19",
    "@storybook/addon-essentials": "^7.0.0-alpha.40",
    "@storybook/addon-interactions": "^7.0.0-alpha.40",
    "@storybook/addon-links": "^7.0.0-alpha.39",
    "@storybook/angular": "^7.0.0-alpha.40",
    "@storybook/preset-scss": "^1.0.3",
    "@storybook/testing-library": "^0.0.13",
    "@types/jasmine": "~4.0.0",
    "@types/node": "^18.11.2",
    "@typescript-eslint/eslint-plugin": "5.37.0",
    "@typescript-eslint/parser": "5.37.0",
    "css-loader": "^6.7.1",
    "eslint": "^8.23.1",
    "husky": "^8.0.0",
    "jasmine-core": "~4.3.0",
    "karma": "~6.4.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.2.0",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.0.0",
    "karma-spec-reporter": "^0.0.34",
    "ngx-translate-testing": "^6.1.0",
    "sass": "^1.56.1",
    "sass-loader": "^13.1.0",
    "storybook": "^7.0.0-alpha.40",
    "style-loader": "^3.3.1",
    "typescript": "~4.8.4"
  }
}

Exception or Error

No response

Your Environment

Angular CLI: 15.0.0
Node: 18.12.1
Package Manager: pnpm 7.16.0
OS: darwin arm64

Angular: 15.0.0
... animations, cdk, cli, common, compiler, compiler-cli, core
... forms, material, platform-browser, platform-browser-dynamic
... router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1500.0 (cli-only)
@angular-devkit/build-angular   15.0.0
@angular-devkit/core            15.0.0 (cli-only)
@angular-devkit/schematics      15.0.0 (cli-only)
@schematics/angular             15.0.0 (cli-only)
rxjs                            7.5.7
typescript                      4.8.4

Anything else relevant?

No response

The text was updated successfully, but these errors were encountered:

…index resolution in esbuild plugin When resolving Sass imports in the experimental esbuild-based browser application builder's Sass plugin, previously imported modules are used as the base for resolution attempts to workaround the lack of the importer file provided by Sass. When attempting to resolve a deep import into a package (including the potential Sass index files), these previously imported modules also need to be checked. This is particularly relevant when using the Yarn PnP or pnpm package managers which enforce strict dependency resolution. Fixes angular#24271

…index resolution in esbuild plugin When resolving Sass imports in the experimental esbuild-based browser application builder's Sass plugin, previously imported modules are used as the base for resolution attempts to workaround the lack of the importer file provided by Sass. When attempting to resolve a deep import into a package (including the potential Sass index files), these previously imported modules also need to be checked. This is particularly relevant when using the Yarn PnP or pnpm package managers which enforce strict dependency resolution. Fixes #24271

…index resolution in esbuild plugin When resolving Sass imports in the experimental esbuild-based browser application builder's Sass plugin, previously imported modules are used as the base for resolution attempts to workaround the lack of the importer file provided by Sass. When attempting to resolve a deep import into a package (including the potential Sass index files), these previously imported modules also need to be checked. This is particularly relevant when using the Yarn PnP or pnpm package managers which enforce strict dependency resolution. Fixes #24271 (cherry picked from commit 67752a4)

angular-automatic-lock-bot · 2022-12-22T08:02:54Z

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

alan-agius4 added freq1: low Only reported by a handful of users who observe it rarely area: @angular-devkit/build-angular angular/build:application type: bug/fix severity3: broken labels Nov 17, 2022

clydin mentioned this issue Nov 18, 2022

fix(@angular-devkit/build-angular): improve package deep import Sass index resolution in esbuild plugin #24279

Merged

clydin closed this as completed in #24279 Nov 21, 2022

angular-automatic-lock-bot bot locked and limited conversation to collaborators Dec 22, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

angular-builder:browser-esbuild fails on angular material & scss imports #24271

angular-builder:browser-esbuild fails on angular material & scss imports #24271

LorinRenodeyn commented Nov 17, 2022

angular-automatic-lock-bot bot commented Dec 22, 2022

angular-builder:browser-esbuild fails on angular material & scss imports #24271

angular-builder:browser-esbuild fails on angular material & scss imports #24271

Comments

LorinRenodeyn commented Nov 17, 2022

Command

Is this a regression?

The previous version in which this bug was not present was

Description

Minimal Reproduction

Exception or Error

Your Environment

Anything else relevant?

angular-automatic-lock-bot bot commented Dec 22, 2022