Angular v11 build fails with "Cannot find module 'postcss'"

I’m having some difficulties getting my Angular site preview to build.

Site-name: adenearnshaw-cv.netlify.app

The site builds locally using the Angular CLI, NPM & the Netlify CLI’s but when I push to GitHub to trigger the build on the Netlify server, it consistently fails.

The latest build log is here: Deploy details | adenearnshaw-cv (netlify.com)

Which refers to error log: /opt/buildhome/.npm/_logs/2021-05-01T19_15_07_213Z-debug.log

I have added a netlify.toml file and converted the command to comand = "CI= npm run build:prod" which from the logs I can see is invoking ng build --prod as expected.

It appears it’s in the pre-processing of the Sass to CSS that it’s failing, but this all works locally, so I’m at a loss as to what the root error may be.

The Production version of the site builds fine, and there’s no obvious changes in the Github PR to suggest why it might be failing.

Raw 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

Duplicate of: Angular v11 deploy fails with “Error: Cannot find module ‘postcss’” - Support - Netlify Support Forums

1 Like

Hey there, @adenearnshaw :wave: Thanks for letting us know this is a duplicate. I am going to close this thread, and keep the one you linked above open for discussion. :slight_smile:

1 Like