Angular v11 deploy fails with "Error: Cannot find module 'postcss'"

Support
1

Site name: adenearnshaw-cv.netlify.app

I have updated my Angular site from v8 to v11. Everything successfully builds locally, but when creating a PR to merge into main, the Netlify Preview Deployment fails to build with what appears to be this error:


Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):

Error: Cannot find module 'postcss'

Steps already taken

  • Locally deleted all items in node_modules then did a clean install and build. Local build succeeds

  • Installed Netlify CLI and ran build locally with this. Local build succeeds

  • Added netlify.toml with build command CI= npm run build:prod. From log this invokes ng build --prod as expected, but remote build fails

  • Double checked PR for changes to file name casing - Non I can see

Related PR

github.com/adenearnshaw - Updating Angular to v11

Deploy Log

https://app.netlify.com/sites/adenearnshaw-cv/deploys/608da870f64537c94f08ab07

NPM debug log: /opt/buildhome/.npm/_logs/2021-05-01T19_15_07_213Z-debug.log


8:13:52 PM: Build ready to start

8:13:53 PM: build-image version: e4d2dbe4cfec46db257e869258461ded89b75c9b

8:13:53 PM: build-image tag: v3.7.3

8:13:53 PM: buildbot version: 2cb5794cb93042dadefe5dbdc6b35edc34c20454

8:13:53 PM: Building without cache

8:13:53 PM: Starting to prepare the repo for build

8:13:54 PM: No cached dependencies found. Cloning fresh repo

8:13:54 PM: git clone https://github.com/adenearnshaw/curriculum-vitae

8:13:58 PM: Preparing Git Reference pull/14/head

8:13:59 PM: Parsing package.json dependencies

8:14:00 PM: Different publish path detected, going to use the one specified in the Netlify configuration file: 'dist/cv' versus 'source/frontend/dist/cv' in the Netlify UI

8:14:00 PM: Different build command detected, going to use the one specified in the Netlify configuration file: 'CI= npm run build:prod' versus 'ng build --prod' in the Netlify UI

8:14:01 PM: Starting build script

8:14:01 PM: Installing dependencies

8:14:01 PM: Python version set to 2.7

8:14:02 PM: Downloading and installing node v10.24.1...

8:14:02 PM: Downloading https://nodejs.org/dist/v10.24.1/node-v10.24.1-linux-x64.tar.xz...

8:14:02 PM: Computing checksum with sha256sum

8:14:02 PM: Checksums matched!

8:14:04 PM: Now using node v10.24.1 (npm v6.14.12)

8:14:04 PM: Started restoring cached build plugins

8:14:04 PM: Finished restoring cached build plugins

8:14:05 PM: Attempting ruby version 2.6.2, read from environment

8:14:06 PM: Using ruby version 2.6.2

8:14:06 PM: Using PHP version 5.6

8:14:06 PM: Started restoring cached node modules

8:14:06 PM: Finished restoring cached node modules

8:14:06 PM: Installing NPM modules using NPM version 6.14.12

8:14:32 PM: npm WARN read-shrinkwrap This version of npm is compatible with lockfileVersion@1, but package-lock.json was generated for lockfileVersion@2. I'll try to do my best with it!

8:14:32 PM: > core-js@3.8.3 postinstall /opt/build/repo/source/frontend/node_modules/@angular-devkit/build-angular/node_modules/core-js

8:14:32 PM: > node -e "try{require('./postinstall')}catch(e){}"

8:14:33 PM: > @angular/cli@11.2.11 postinstall /opt/build/repo/source/frontend/node_modules/@angular/cli

8:14:33 PM: > node ./bin/postinstall/script.js

8:14:34 PM: npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.3.2 (node_modules/rollup/node_modules/fsevents):

8:14:34 PM: npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.3.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

8:14:34 PM: npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.7 (node_modules/fsevents):

8:14:34 PM: npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.7: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

8:14:34 PM: npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.3.2 (node_modules/chokidar/node_modules/fsevents):

8:14:34 PM: npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.3.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

8:14:34 PM: added 1472 packages from 643 contributors and audited 1545 packages in 27.478s

8:14:36 PM: 93 packages are looking for funding

8:14:36 PM:   run `npm fund` for details

8:14:36 PM: found 13 low severity vulnerabilities

8:14:36 PM:   run `npm audit fix` to fix them, or `npm audit` for details

8:14:36 PM: NPM modules installed

8:14:36 PM: Started restoring cached go cache

8:14:36 PM: Finished restoring cached go cache

8:14:36 PM: Installing Go version 1.12

8:14:41 PM: unset GOOS;

8:14:41 PM: unset GOARCH;

8:14:41 PM: export GOROOT='/opt/buildhome/.gimme_cache/versions/go1.12.linux.amd64';

8:14:41 PM: export PATH="/opt/buildhome/.gimme_cache/versions/go1.12.linux.amd64/bin:${PATH}";

8:14:41 PM: go version >&2;

8:14:41 PM: export GIMME_ENV="/opt/buildhome/.gimme_cache/env/go1.12.linux.amd64.env"

8:14:41 PM: go version go1.12 linux/amd64

8:14:41 PM: Installing missing commands

8:14:41 PM: Verify run directory

8:14:42 PM: ​

8:14:42 PM: ────────────────────────────────────────────────────────────────

8:14:42 PM:   Netlify Build                                                 

8:14:42 PM: ────────────────────────────────────────────────────────────────

8:14:42 PM: ​

8:14:42 PM: ❯ Version

8:14:42 PM:   @netlify/build 11.5.1

8:14:42 PM: ​

8:14:42 PM: ❯ Flags

8:14:42 PM:   deployId: 608da870f64537c94f08ab07

8:14:42 PM: ​

8:14:42 PM: ❯ Current directory

8:14:42 PM:   /opt/build/repo/source/frontend

8:14:42 PM: ​

8:14:42 PM: ❯ Config file

8:14:42 PM:   /opt/build/repo/source/frontend/netlify.toml

8:14:42 PM: ​

8:14:42 PM: ❯ Context

8:14:42 PM:   deploy-preview

8:14:42 PM: ​

8:14:42 PM: ────────────────────────────────────────────────────────────────

8:14:42 PM:   1. build.command from netlify.toml                            

8:14:42 PM: ────────────────────────────────────────────────────────────────

8:14:42 PM: ​

8:14:42 PM: $ CI= npm run build:prod

8:14:43 PM: > cv@1.0.0 build:prod /opt/build/repo/source/frontend

8:14:43 PM: > ng build --prod

8:14:50 PM: Compiling @angular/core : es2015 as esm2015

8:14:54 PM: Compiling @angular/common : es2015 as esm2015

8:14:54 PM: Compiling @angular/platform-browser : es2015 as esm2015

8:14:54 PM: Compiling @angular/service-worker : es2015 as esm2015

8:14:55 PM: Compiling @angular/platform-browser-dynamic : es2015 as esm2015

8:14:58 PM: Compiling @angular/router : es2015 as esm2015

8:15:05 PM: - Generating browser application bundles...

8:15:07 PM: ✔ Browser application bundle generation complete.

8:15:07 PM: Error: ./src/main.ts

8:15:07 PM: Module build failed (from ./node_modules/@ngtools/webpack/src/ivy/index.js):

8:15:07 PM: CssSyntaxError: /opt/build/repo/source/frontend/src/app/home/home.component.scss:1:1: Unknown word

8:15:07 PM: You tried to parse SCSS with the standard CSS parser; try again with the postcss-scss parser

8:15:07 PM:     at Input.error (/opt/build/repo/source/frontend/node_modules/@angular-devkit/build-angular/node_modules/postcss/lib/input.js:121:16)

8:15:07 PM:     at Parser.unknownWord (/opt/build/repo/source/frontend/node_modules/@angular-devkit/build-angular/node_modules/postcss/lib/parser.js:518:22)

8:15:07 PM:     at Parser.other (/opt/build/repo/source/frontend/node_modules/@angular-devkit/build-angular/node_modules/postcss/lib/parser.js:149:12)

8:15:07 PM:     at Parser.parse (/opt/build/repo/source/frontend/node_modules/@angular-devkit/build-angular/node_modules/postcss/lib/parser.js:59:16)

8:15:07 PM:     at parse (/opt/build/repo/source/frontend/node_modules/@angular-devkit/build-angular/node_modules/postcss/lib/parse.js:11:12)

8:15:07 PM:     at new LazyResult (/opt/build/repo/source/frontend/node_modules/@angular-devkit/build-angular/node_modules/postcss/lib/lazy-result.js:122:16)

8:15:07 PM:     at Processor.process (/opt/build/repo/source/frontend/node_modules/@angular-devkit/build-angular/node_modules/postcss/lib/processor.js:33:12)

8:15:07 PM:     at Promise (/opt/build/repo/source/frontend/node_modules/@angular-devkit/build-angular/src/webpack/plugins/optimize-css-webpack-plugin.js:96:45)

8:15:07 PM:     at new Promise (<anonymous>)

8:15:07 PM:     at files.filter.map (/opt/build/repo/source/frontend/node_modules/@angular-devkit/build-angular/src/webpack/plugins/optimize-css-webpack-plugin.js:93:38)

8:15:07 PM:     at Array.map (<anonymous>)

8:15:07 PM:     at hook (/opt/build/repo/source/frontend/node_modules/@angular-devkit/build-angular/src/webpack/plugins/optimize-css-webpack-plugin.js:59:18)

8:15:07 PM:     at compilation.hooks.optimizeChunkAssets.tapPromise (/opt/build/repo/source/frontend/node_modules/@angular-devkit/build-angular/src/webpack/plugins/optimize-css-webpack-plugin.js:41:24)

8:15:07 PM:     at AsyncSeriesHook.eval [as callAsync] (eval at create (/opt/build/repo/source/frontend/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:36:17)

8:15:07 PM:     at AsyncSeriesHook.lazyCompileHook (/opt/build/repo/source/frontend/node_modules/tapable/lib/Hook.js:154:20)

8:15:07 PM:     at hooks.additionalAssets.callAsync.err (/opt/build/repo/source/frontend/node_modules/webpack/lib/Compilation.js:1409:36)

8:15:07 PM:  @ multi ./src/main.ts main[0]

8:15:07 PM: Error: ./src/polyfills.ts

8:15:07 PM: Module build failed (from ./node_modules/@ngtools/webpack/src/ivy/index.js):

8:15:07 PM: CssSyntaxError: /opt/build/repo/source/frontend/src/app/home/home.component.scss:1:1: Unknown word

8:15:07 PM: You tried to parse SCSS with the standard CSS parser; try again with the postcss-scss parser

8:15:07 PM:     at Input.error (/opt/build/repo/source/frontend/node_modules/@angular-devkit/build-angular/node_modules/postcss/lib/input.js:121:16)

8:15:07 PM:     at Parser.unknownWord (/opt/build/repo/source/frontend/node_modules/@angular-devkit/build-angular/node_modules/postcss/lib/parser.js:518:22)

8:15:07 PM:     at Parser.other (/opt/build/repo/source/frontend/node_modules/@angular-devkit/build-angular/node_modules/postcss/lib/parser.js:149:12)

8:15:07 PM:     at Parser.parse (/opt/build/repo/source/frontend/node_modules/@angular-devkit/build-angular/node_modules/postcss/lib/parser.js:59:16)

8:15:07 PM:     at parse (/opt/build/repo/source/frontend/node_modules/@angular-devkit/build-angular/node_modules/postcss/lib/parse.js:11:12)

8:15:07 PM:     at new LazyResult (/opt/build/repo/source/frontend/node_modules/@angular-devkit/build-angular/node_modules/postcss/lib/lazy-result.js:122:16)

8:15:07 PM:     at Processor.process (/opt/build/repo/source/frontend/node_modules/@angular-devkit/build-angular/node_modules/postcss/lib/processor.js:33:12)

8:15:07 PM:     at Promise (/opt/build/repo/source/frontend/node_modules/@angular-devkit/build-angular/src/webpack/plugins/optimize-css-webpack-plugin.js:96:45)

8:15:07 PM:     at new Promise (<anonymous>)

8:15:07 PM:     at files.filter.map (/opt/build/repo/source/frontend/node_modules/@angular-devkit/build-angular/src/webpack/plugins/optimize-css-webpack-plugin.js:93:38)

8:15:07 PM:     at Array.map (<anonymous>)

8:15:07 PM:     at hook (/opt/build/repo/source/frontend/node_modules/@angular-devkit/build-angular/src/webpack/plugins/optimize-css-webpack-plugin.js:59:18)

8:15:07 PM:     at compilation.hooks.optimizeChunkAssets.tapPromise (/opt/build/repo/source/frontend/node_modules/@angular-devkit/build-angular/src/webpack/plugins/optimize-css-webpack-plugin.js:41:24)

8:15:07 PM:     at AsyncSeriesHook.eval [as callAsync] (eval at create (/opt/build/repo/source/frontend/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:36:17)

8:15:07 PM:     at AsyncSeriesHook.lazyCompileHook (/opt/build/repo/source/frontend/node_modules/tapable/lib/Hook.js:154:20)

8:15:07 PM:     at hooks.additionalAssets.callAsync.err (/opt/build/repo/source/frontend/node_modules/webpack/lib/Compilation.js:1409:36)

8:15:07 PM:  @ multi ./src/polyfills.ts polyfills[0]

8:15:07 PM: Error: ./src/styles/styles.scss

8:15:07 PM: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):

8:15:07 PM: ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):

8:15:07 PM: Error: Cannot find module 'postcss'

8:15:07 PM:     at Function.Module._resolveFilename (internal/modules/cjs/loader.js:636:15)

8:15:07 PM:     at Function.Module._load (internal/modules/cjs/loader.js:562:25)

8:15:07 PM:     at Module.require (internal/modules/cjs/loader.js:692:17)

8:15:07 PM:     at require (internal/modules/cjs/helpers.js:25:18)

8:15:07 PM:     at Object.<anonymous> (/opt/build/repo/source/frontend/node_modules/postcss-loader/dist/index.js:12:39)

8:15:07 PM:     at Module._compile (internal/modules/cjs/loader.js:778:30)

8:15:07 PM:     at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)

8:15:07 PM:     at Module.load (internal/modules/cjs/loader.js:653:32)

8:15:07 PM:     at tryModuleLoad (internal/modules/cjs/loader.js:593:12)

8:15:07 PM:     at Function.Module._load (internal/modules/cjs/loader.js:585:3)

8:15:07 PM:     at Module.require (internal/modules/cjs/loader.js:692:17)

8:15:07 PM:     at require (internal/modules/cjs/helpers.js:25:18)

8:15:07 PM:     at Object.<anonymous> (/opt/build/repo/source/frontend/node_modules/postcss-loader/dist/cjs.js:3:18)

8:15:07 PM:     at Module._compile (internal/modules/cjs/loader.js:778:30)

8:15:07 PM:     at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)

8:15:07 PM:     at Module.load (internal/modules/cjs/loader.js:653:32)

8:15:07 PM:     at runLoaders (/opt/build/repo/source/frontend/node_modules/webpack/lib/NormalModule.js:316:20)

8:15:07 PM:     at /opt/build/repo/source/frontend/node_modules/loader-runner/lib/LoaderRunner.js:367:11

8:15:07 PM:     at /opt/build/repo/source/frontend/node_modules/loader-runner/lib/LoaderRunner.js:172:11

8:15:07 PM:     at loadLoader (/opt/build/repo/source/frontend/node_modules/loader-runner/lib/loadLoader.js:32:11)

8:15:07 PM:     at iteratePitchingLoaders (/opt/build/repo/source/frontend/node_modules/loader-runner/lib/LoaderRunner.js:169:2)

8:15:07 PM:     at iteratePitchingLoaders (/opt/build/repo/source/frontend/node_modules/loader-runner/lib/LoaderRunner.js:165:10)

8:15:07 PM:     at /opt/build/repo/source/frontend/node_modules/loader-runner/lib/LoaderRunner.js:176:18

8:15:07 PM:     at loadLoader (/opt/build/repo/source/frontend/node_modules/loader-runner/lib/loadLoader.js:47:3)

8:15:07 PM:     at iteratePitchingLoaders (/opt/build/repo/source/frontend/node_modules/loader-runner/lib/LoaderRunner.js:169:2)

8:15:07 PM:     at runLoaders (/opt/build/repo/source/frontend/node_modules/loader-runner/lib/LoaderRunner.js:365:2)

8:15:07 PM:     at NormalModule.doBuild (/opt/build/repo/source/frontend/node_modules/webpack/lib/NormalModule.js:295:3)

8:15:07 PM:     at NormalModule.build (/opt/build/repo/source/frontend/node_modules/webpack/lib/NormalModule.js:446:15)

8:15:07 PM:     at Compilation.buildModule (/opt/build/repo/source/frontend/node_modules/webpack/lib/Compilation.js:739:10)

8:15:07 PM:     at moduleFactory.create (/opt/build/repo/source/frontend/node_modules/webpack/lib/Compilation.js:1111:12)

8:15:07 PM:     at factory (/opt/build/repo/source/frontend/node_modules/webpack/lib/NormalModuleFactory.js:409:6)

8:15:07 PM:     at hooks.afterResolve.callAsync (/opt/build/repo/source/frontend/node_modules/webpack/lib/NormalModuleFactory.js:155:13)

8:15:07 PM:  @ multi ./src/styles/styles.scss styles[0]

8:15:07 PM: Error: ./src/styles/styles.scss (./node_modules/css-loader/dist/cjs.js??ref--13-1!./node_modules/postcss-loader/dist/cjs.js??ref--13-2!./node_modules/resolve-url-loader??ref--13-3!./node_modules/sass-loader/dist/cjs.js??ref--13-4!./src/styles/styles.scss)

8:15:07 PM: Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):

8:15:07 PM: Error: Cannot find module 'postcss'

8:15:07 PM:     at Function.Module._resolveFilename (internal/modules/cjs/loader.js:636:15)

8:15:07 PM:     at Function.Module._load (internal/modules/cjs/loader.js:562:25)

8:15:07 PM:     at Module.require (internal/modules/cjs/loader.js:692:17)

8:15:07 PM:     at require (internal/modules/cjs/helpers.js:25:18)

8:15:07 PM:     at Object.<anonymous> (/opt/build/repo/source/frontend/node_modules/postcss-loader/dist/index.js:12:39)

8:15:07 PM:     at Module._compile (internal/modules/cjs/loader.js:778:30)

8:15:07 PM:     at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)

8:15:07 PM:     at Module.load (internal/modules/cjs/loader.js:653:32)

8:15:07 PM:     at tryModuleLoad (internal/modules/cjs/loader.js:593:12)

8:15:07 PM:     at Function.Module._load (internal/modules/cjs/loader.js:585:3)

8:15:07 PM:     at Module.require (internal/modules/cjs/loader.js:692:17)

8:15:07 PM:     at require (internal/modules/cjs/helpers.js:25:18)

8:15:07 PM:     at Object.<anonymous> (/opt/build/repo/source/frontend/node_modules/postcss-loader/dist/cjs.js:3:18)

8:15:07 PM:     at Module._compile (internal/modules/cjs/loader.js:778:30)

8:15:07 PM:     at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)

8:15:07 PM:     at Module.load (internal/modules/cjs/loader.js:653:32)

8:15:07 PM: npm ERR! code ELIFECYCLE

8:15:07 PM: npm ERR! errno 1

8:15:07 PM: npm ERR! cv@1.0.0 build:prod: `ng build --prod`

8:15:07 PM: npm ERR! Exit status 1

8:15:07 PM: npm ERR!

8:15:07 PM: npm ERR! Failed at the cv@1.0.0 build:prod script.

8:15:07 PM: npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

8:15:07 PM: npm ERR! A complete log of this run can be found in:

8:15:07 PM: npm ERR!     /opt/buildhome/.npm/_logs/2021-05-01T19_15_07_213Z-debug.log

8:15:07 PM: ​

8:15:07 PM: ────────────────────────────────────────────────────────────────

8:15:07 PM:   "build.command" failed                                        

8:15:07 PM: ────────────────────────────────────────────────────────────────

8:15:07 PM: ​

8:15:07 PM:   Error message

8:15:07 PM:   Command failed with exit code 1: CI= npm run build:prod

8:15:07 PM: ​

8:15:07 PM:   Error location

8:15:07 PM:   In build.command from netlify.toml:

8:15:07 PM:   CI= npm run build:prod

8:15:07 PM: ​

8:15:07 PM:   Resolved config

8:15:07 PM:   build:

8:15:07 PM:     base: /opt/build/repo/source/frontend

8:15:07 PM:     command: CI= npm run build:prod

8:15:07 PM:     commandOrigin: config

8:15:07 PM:     environment:

8:15:07 PM:       - REVIEW_ID

8:15:07 PM:     publish: /opt/build/repo/dist/cv

8:15:07 PM:   redirects:

8:15:07 PM:     - from: /*

      status: 200

      to: /index.html

Caching artifacts

8:15:07 PM: Started saving node modules

8:15:07 PM: Finished saving node modules

8:15:07 PM: Started saving build plugins

8:15:07 PM: Finished saving build plugins

8:15:07 PM: Started saving pip cache

8:15:07 PM: Finished saving pip cache

8:15:07 PM: Started saving emacs cask dependencies

8:15:07 PM: Finished saving emacs cask dependencies

8:15:07 PM: Started saving maven dependencies

8:15:07 PM: Finished saving maven dependencies

8:15:07 PM: Started saving boot dependencies

8:15:07 PM: Finished saving boot dependencies

8:15:07 PM: Started saving rust rustup cache

8:15:07 PM: Finished saving rust rustup cache

8:15:07 PM: Started saving go dependencies

8:15:09 PM: Finished saving go dependencies

8:15:12 PM: Build failed due to a user error: Build script returned non-zero exit code: 2

8:15:12 PM: Creating deploy upload records

8:15:12 PM: Failing build: Failed to build site

8:15:12 PM: Failed during stage 'building site': Build script returned non-zero exit code: 2

8:15:12 PM: Finished processing build request in 1m18.521572643s

Any help would be appreciated

3

Hey there, @adenearnshaw :wave:

Thanks so much for writing a detailed post here! It looks like this thread as been a bit quiet since you opened it-- are you still encountering this error? If so, what additional debugging steps have you taken in the past week?

If you’re still having difficulties I will loop in one of our Support Engineers, so let us know :slight_smile:

4

I retried the build a couple of times, but it still fails on the Netlify server build

Locally I cleared out my NPM cache and re-cloned the repo & was still able to build it.

Any support would be great, thanks

6

Hi @adenearnshaw , thanks for your patience! It looks like the error in the deploy log is line 96

3:15:07 PM: You tried to parse SCSS with the standard CSS parser; try again with the postcss-scss parser

Can see if the solution provided in this GH issue helps and let us know?

2 Likes
7

I’ve been able to fix the problem by deleting & re-creating my package-lock.json file.
Once I did this, the build seems to deploy ok

1 Like
8

Thank you for letting us know, @adenearnshaw glad this is up and working for you :netliconfetti: