Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Module build failure after upgrade from 12.0.1 to 14.0.0 #448

Closed
Bottswana opened this issue Feb 8, 2021 · 17 comments · Fixed by #453
Closed

Module build failure after upgrade from 12.0.1 to 14.0.0 #448

Bottswana opened this issue Feb 8, 2021 · 17 comments · Fixed by #453
Labels

Comments

@Bottswana
Copy link

Hello,

After updating my Angular app from 10 to 11 recently, I am encountering build errors from postcss-import after the package is upgraded to 14.0.0.

Downgrading the package manually to 12.0.1, which was the previously installed version by Angular, fixes the problem.
Not sure if this is a screw up on my behalf from the Angular migration or not, if so, apologies for spamming your issue tracker.

Error: ./src/styles.css
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
TypeError: Cannot read property '0' of undefined
    at /home/runner/work/ProvisionThat/ProvisionThat/ProvisionThat-Web/ProvisionThat.Web.Frontend/ClientApp/node_modules/@angular-devkit/build-angular/node_modules/postcss-import/index.js:78:37
    at Array.forEach (<anonymous>)
    at applyMedia (/home/runner/work/ProvisionThat/ProvisionThat/ProvisionThat-Web/ProvisionThat.Web.Frontend/ClientApp/node_modules/@angular-devkit/build-angular/node_modules/postcss-import/index.js:70:16)
    at /home/runner/work/ProvisionThat/ProvisionThat/ProvisionThat-Web/ProvisionThat.Web.Frontend/ClientApp/node_modules/@angular-devkit/build-angular/node_modules/postcss-import/index.js:51:9
    at async LazyResult.runAsync (/home/runner/work/ProvisionThat/ProvisionThat/ProvisionThat-Web/ProvisionThat.Web.Frontend/ClientApp/node_modules/@angular-devkit/build-angular/node_modules/postcss/lib/lazy-result.js:358:11)
    at async Object.loader (/home/runner/work/ProvisionThat/ProvisionThat/ProvisionThat-Web/ProvisionThat.Web.Frontend/ClientApp/node_modules/postcss-loader/dist/index.js:95:14)
    at /home/runner/work/ProvisionThat/ProvisionThat/ProvisionThat-Web/ProvisionThat.Web.Frontend/ClientApp/node_modules/webpack/lib/NormalModule.js:316:20
    at /home/runner/work/ProvisionThat/ProvisionThat/ProvisionThat-Web/ProvisionThat.Web.Frontend/ClientApp/node_modules/loader-runner/lib/LoaderRunner.js:367:11
    at /home/runner/work/ProvisionThat/ProvisionThat/ProvisionThat-Web/ProvisionThat.Web.Frontend/ClientApp/node_modules/loader-runner/lib/LoaderRunner.js:233:18
    at context.callback (/home/runner/work/ProvisionThat/ProvisionThat/ProvisionThat-Web/ProvisionThat.Web.Frontend/ClientApp/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
    at Object.loader (/home/runner/work/ProvisionThat/ProvisionThat/ProvisionThat-Web/ProvisionThat.Web.Frontend/ClientApp/node_modules/postcss-loader/dist/index.js:104:7)
 @ multi ./node_modules/@clr/icons/clr-icons.min.css ./node_modules/@clr/ui/clr-ui.min.css ./src/styles.css styles[2]

Error: ./src/styles.css (./node_modules/css-loader/dist/cjs.js??ref--13-1!./node_modules/postcss-loader/dist/cjs.js??ref--13-2!./src/styles.css)
Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
TypeError: Cannot read property '0' of undefined
    at /home/runner/work/ProvisionThat/ProvisionThat/ProvisionThat-Web/ProvisionThat.Web.Frontend/ClientApp/node_modules/@angular-devkit/build-angular/node_modules/postcss-import/index.js:78:37
    at Array.forEach (<anonymous>)
    at applyMedia (/home/runner/work/ProvisionThat/ProvisionThat/ProvisionThat-Web/ProvisionThat.Web.Frontend/ClientApp/node_modules/@angular-devkit/build-angular/node_modules/postcss-import/index.js:70:16)
    at /home/runner/work/ProvisionThat/ProvisionThat/ProvisionThat-Web/ProvisionThat.Web.Frontend/ClientApp/node_modules/@angular-devkit/build-angular/node_modules/postcss-import/index.js:51:9
    at async LazyResult.runAsync (/home/runner/work/ProvisionThat/ProvisionThat/ProvisionThat-Web/ProvisionThat.Web.Frontend/ClientApp/node_modules/@angular-devkit/build-angular/node_modules/postcss/lib/lazy-result.js:358:11)
    at async Object.loader (/home/runner/work/ProvisionThat/ProvisionThat/ProvisionThat-Web/ProvisionThat.Web.Frontend/ClientApp/node_modules/postcss-loader/dist/index.js:95:14)

Jump to Line

This appears to be caused by the following line in the styles.css:
@import "../node_modules/@clr/ui/clr-ui-dark.min.css" screen and (prefers-color-scheme: dark);

Specifically, around the media query at the end of the import. Removing the media query fixes the error
@import "../node_modules/@clr/ui/clr-ui-dark.min.css";

angular.json

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "ClientApp": {
      "projectType": "application",
      "schematics": {},
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "progress": true,
            "outputPath": "dist/ClientApp",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "aot": true,
            "assets": [
              "src/silent-refresh.html",
              "src/silent-refresh.js",
              "src/CHANGELOG.txt",
              "src/favicon.ico",
              "src/assets",
              "src/docs"
            ],
            "styles": [
              "node_modules/@clr/icons/clr-icons.min.css",
              "node_modules/@clr/ui/clr-ui.min.css",
              "src/styles.css"
            ],
            "scripts": [
              "node_modules/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js",
              "node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js",
              "node_modules/@clr/icons/clr-icons.min.js"
            ],
            "allowedCommonJsDependencies": [
              "qrcode"
            ]
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "namedChunks": false,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "5mb",
                  "maximumError": "10mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "6kb",
                  "maximumError": "10kb"
                }
              ]
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "ClientApp:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "ClientApp:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "ClientApp:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.spec.json",
            "karmaConfig": "karma.conf.js",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.css"
            ],
            "scripts": []
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "tsconfig.app.json",
              "tsconfig.spec.json",
              "e2e/tsconfig.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        },
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "ClientApp:serve"
          },
          "configurations": {
            "production": {
              "devServerTarget": "ClientApp:serve:production"
            }
          }
        }
      }
    }
  },
  "defaultProject": "ClientApp"
}

package.json

{
  "name": "provisionthat.web",
  "version": "1.0.0",
  "scripts": {
    "ng": "ng",
    "update": "ng update",
    "start": "ng serve",
    "build": "ng build --subresource-integrity",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^11.1.2",
    "@angular/common": "^11.1.2",
    "@angular/compiler": "^11.1.2",
    "@angular/core": "^11.1.2",
    "@angular/forms": "^11.1.2",
    "@angular/localize": "^11.1.2",
    "@angular/platform-browser": "^11.1.2",
    "@angular/platform-browser-dynamic": "^11.1.2",
    "@angular/router": "^11.1.2",
    "@cds/core": "^5.0.0",
    "@clr/angular": "^5.0.1",
    "@clr/core": "^4.0.11",
    "@clr/icons": "^5.0.1",
    "@clr/ui": "^5.0.1",
    "@webcomponents/custom-elements": "^1.4.3",
    "@webcomponents/webcomponentsjs": "^2.5.0",
    "angular-oauth2-oidc": "^10.0.3",
    "angularx-qrcode": "^11.0.0",
    "dompurify": "^2.2.6",
    "marked": "^2.0.0",
    "nan": "^2.14.2",
    "postcss": "^8.2.5",
    "rxjs": "^6.6.3",
    "tslib": "^2.0.0",
    "zone.js": "^0.11.3"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.1101.4",
    "@angular/cli": "^11.1.4",
    "@angular/compiler-cli": "^11.1.2",
    "@angular/language-service": "^11.1.2",
    "@fortawesome/angular-fontawesome": "^0.8.2",
    "@fortawesome/fontawesome-svg-core": "^1.2.34",
    "@fortawesome/pro-light-svg-icons": "^5.15.2",
    "@fortawesome/pro-regular-svg-icons": "^5.15.2",
    "@fortawesome/pro-solid-svg-icons": "^5.15.2",
    "@types/jasmine": "~3.6.0",
    "@types/jasminewd2": "^2.0.8",
    "@types/node": "^14.14.25",
    "codelyzer": "^6.0.0",
    "jasmine-core": "~3.6.0",
    "jasmine-spec-reporter": "^6.0.0",
    "karma": "^6.1.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "^3.0.3",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "protractor": "~7.0.0",
    "ts-node": "^9.1.1",
    "tslint": "^6.1.3",
    "typescript": "^4.1.3"
  }
}
cat package-lock.json | grep postcss-import
 "postcss-import": "14.0.0",
@RyanZim
Copy link
Collaborator

RyanZim commented Feb 8, 2021

Without a reduced test case, there is no way I can debug this.

@Bottswana
Copy link
Author

Sure thing, I will update with a minimal repository to reproduce the issue

@Bottswana
Copy link
Author

Here is a repository with a minimal angular install that reproduces the build error.
https://github.com/Bottswana/postcss-reproducable

@RyanZim
Copy link
Collaborator

RyanZim commented Feb 11, 2021

Hmm, seems like it's erroring out in some code added in v8, and does seem tied to media imports. Is this reproducible if you use postcss-import directly (i.e. outside of angular tooling)?

@Bottswana
Copy link
Author

Yes, with a minimally configured webpack environment using postcss and postcss-import I encounter the same error,
I have created a branch of the repository with this test environment:

Repository

assets by status 3.7 KiB [cached] 1 asset
runtime modules 663 bytes 3 modules
orphan modules 370 bytes [orphan] 1 module
cacheable modules 7.1 KiB
  ./src/index.js + 1 modules 401 bytes [built] [code generated]
  ./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js 6.67 KiB [built] [code generated]
  ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js!./src/styles.css 39 bytes [built] [code generated] [1 error]

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value.
Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/

ERROR in ./src/styles.css (./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js!./src/styles.css)
Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
TypeError: Cannot read property '0' of undefined
    at C:\Users\James\Desktop\New folder\node_modules\postcss-import\index.js:78:37
    at Array.forEach (<anonymous>)
    at applyMedia (C:\Users\James\Desktop\New folder\node_modules\postcss-import\index.js:70:16)
    at C:\Users\James\Desktop\New folder\node_modules\postcss-import\index.js:51:9
    at async LazyResult.runAsync (C:\Users\James\Desktop\New folder\node_modules\postcss\lib\lazy-result.js:358:11)
    at async Object.loader (C:\Users\James\Desktop\New folder\node_modules\postcss-loader\dist\index.js:87:14)
 @ ./src/styles.css 2:12-131 9:17-24 13:15-29
 @ ./src/index.js 1:0-31

webpack 5.21.2 compiled with 1 error and 1 warning in 1114 ms

@RyanZim
Copy link
Collaborator

RyanZim commented Feb 12, 2021

OK, finally figured out why it's failing in this specific case. The file you're importing starts with a @charset statement. Seems postcss-import doesn't handle media imports for files with @charset correctly. This is due to some improvements I made to @charset handling in v14.0.0; as a workaround until I get this fixed, please downgrade to postcss-import v13. Now, to figure out how to fix...

@Bottswana
Copy link
Author

Interesting! That explains why it only seemed to be happening to me.
I already patched myself locally by rolling back to an older version.

@artem-kurchenko
Copy link

artem-kurchenko commented Mar 17, 2021

Hi all,

We also encountered this case in Angular 11 applications when styles.css use the following syntax:
@import url('./testStyle.css') screen and (max-width: 1366px);

and my CSS file has

@charset "UTF-8";
.a{
    width: 200px;
}

In case it helps I've attached a simple example for testing
SampleForTesting.zip

@mesineni
Copy link

OK, finally figured out why it's failing in this specific case. The file you're importing starts with a @charset statement. Seems postcss-import doesn't handle media imports for files with @charset correctly. This is due to some improvements I made to @charset handling in v14.0.0; as a workaround until I get this fixed, please downgrade to postcss-import v13. Now, to figure out how to fix...

How to downgrade ? In package.json if I downgrade using "postcss-import": "12.0.1" , in package-lock.json its still showing v14.0.0. I did manually updated package-lock.json file. its working. But If I do npm i again I have to update manually. how can avoid this ?

@Bottswana
Copy link
Author

OK, finally figured out why it's failing in this specific case. The file you're importing starts with a @charset statement. Seems postcss-import doesn't handle media imports for files with @charset correctly. This is due to some improvements I made to @charset handling in v14.0.0; as a workaround until I get this fixed, please downgrade to postcss-import v13. Now, to figure out how to fix...

How to downgrade ? In package.json if I downgrade using "postcss-import": "12.0.1" , in package-lock.json its still showing v14.0.0. I did manually updated package-lock.json file. its working. But If I do npm i again I have to update manually. how can avoid this ?

I patched this using npm-force-resolutions until the issue is resolved.

@RyanZim
Copy link
Collaborator

RyanZim commented Mar 29, 2021

Proposed fix: #453

RyanZim added a commit that referenced this issue Mar 31, 2021
@mesineni
Copy link

mesineni commented Apr 1, 2021

When this fix will be available ?

@RyanZim
Copy link
Collaborator

RyanZim commented Apr 1, 2021

It is available in v14.0.1

@mesineni
Copy link

mesineni commented Apr 6, 2021

is version 14.0.1 is released ?. By default in which angular version it is associated ?

@RyanZim
Copy link
Collaborator

RyanZim commented Apr 6, 2021

It is released; I have no idea how angular handles any of this.

@mesineni
Copy link

This library is angular internal dependency. When I specify version package.json still showing v14.0.0.

Any Idea on which version angular will include this fix ?

@RyanZim
Copy link
Collaborator

RyanZim commented Apr 13, 2021

No, you'll have to ask angular about this (assuming your lockfile isn't holding it back)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging a pull request may close this issue.

4 participants