Netlify build failed with webpack error - css-syntax-error (unknown word)

Site name: https://glooneevents.netlify.app/

Using Gatsby, Material-UI

On netlify deploy I get this error WebpackError: Pathname: / CssSyntaxError: <css input>:3048:5: Unknown word. I suspect the issue is caused by the autoprefixer plugin used by material-ui. I’ve run the build locally with gatsby build, it works perfectly fine with no errors. I also tried debugging the issue using webpack stats, cross-examine all css properties in my code 3x… there were no errors.

Deploy log:

12:10:57 PM: Build ready to start
12:10:59 PM: build-image version: b0258b965567defc4a2d7e2f2dec2e00c8f73ad6
12:10:59 PM: build-image tag: v3.4.1
12:10:59 PM: buildbot version: f208f75f13b26c64ea911ee34a5b41383e73cc40
12:10:59 PM: Fetching cached dependencies
12:10:59 PM: Failed to fetch cache, continuing with build
12:10:59 PM: Starting to prepare the repo for build
12:11:00 PM: No cached dependencies found. Cloning fresh repo
12:11:00 PM: git clone https://github.com/Ismail-Opatola/gloone-events
12:11:02 PM: Preparing Git Reference refs/heads/master
12:11:04 PM: Starting build script
12:11:04 PM: Installing dependencies
12:11:04 PM: Python version set to 2.7
12:11:06 PM: v12.18.0 is already installed.
12:11:06 PM: Now using node v12.18.0 (npm v6.14.4)
12:11:06 PM: Started restoring cached build plugins
12:11:06 PM: Finished restoring cached build plugins
12:11:06 PM: Attempting ruby version 2.7.1, read from environment
12:11:08 PM: Using ruby version 2.7.1
12:11:08 PM: Using PHP version 5.6
12:11:08 PM: 5.2 is already installed.
12:11:08 PM: Using Swift version 5.2
12:11:08 PM: Started restoring cached node modules
12:11:08 PM: Finished restoring cached node modules
12:11:09 PM: Installing NPM modules using NPM version 6.14.4
12:12:14 PM: > sharp@0.25.4 install /opt/build/repo/node_modules/sharp
12:12:14 PM: > (node install/libvips && node install/dll-copy && prebuild-install --runtime=napi) || (node-gyp rebuild && node install/dll-copy)
12:12:15 PM: info sharp Downloading https://github.com/lovell/sharp-libvips/releases/download/v8.9.1/libvips-8.9.1-linux-x64.tar.gz
12:12:17 PM: > core-js@3.6.5 postinstall /opt/build/repo/node_modules/@jimp/bmp/node_modules/core-js
12:12:17 PM: > node -e "try{require('./postinstall')}catch(e){}"
12:12:17 PM: > core-js@3.6.5 postinstall /opt/build/repo/node_modules/@jimp/core/node_modules/core-js
12:12:17 PM: > node -e "try{require('./postinstall')}catch(e){}"
12:12:17 PM: > core-js@3.6.5 postinstall /opt/build/repo/node_modules/@jimp/custom/node_modules/core-js
12:12:17 PM: > node -e "try{require('./postinstall')}catch(e){}"
12:12:17 PM: > core-js@3.6.5 postinstall /opt/build/repo/node_modules/@jimp/gif/node_modules/core-js
12:12:17 PM: > node -e "try{require('./postinstall')}catch(e){}"
12:12:17 PM: > core-js@3.6.5 postinstall /opt/build/repo/node_modules/@jimp/jpeg/node_modules/core-js
12:12:17 PM: > node -e "try{require('./postinstall')}catch(e){}"
12:12:18 PM: > core-js@3.6.5 postinstall /opt/build/repo/node_modules/@jimp/plugin-blit/node_modules/core-js
12:12:18 PM: > node -e "try{require('./postinstall')}catch(e){}"
12:12:18 PM: > core-js@3.6.5 postinstall /opt/build/repo/node_modules/@jimp/plugin-blur/node_modules/core-js
12:12:18 PM: > node -e "try{require('./postinstall')}catch(e){}"
12:12:18 PM: > core-js@3.6.5 postinstall /opt/build/repo/node_modules/@jimp/plugin-circle/node_modules/core-js
12:12:18 PM: > node -e "try{require('./postinstall')}catch(e){}"
12:12:18 PM: > core-js@3.6.5 postinstall /opt/build/repo/node_modules/@jimp/plugin-color/node_modules/core-js
12:12:18 PM: > node -e "try{require('./postinstall')}catch(e){}"
12:12:18 PM: > core-js@3.6.5 postinstall /opt/build/repo/node_modules/@jimp/plugin-contain/node_modules/core-js
12:12:18 PM: > node -e "try{require('./postinstall')}catch(e){}"
12:12:18 PM: > core-js@3.6.5 postinstall /opt/build/repo/node_modules/@jimp/plugin-cover/node_modules/core-js
12:12:18 PM: > node -e "try{require('./postinstall')}catch(e){}"
12:12:18 PM: > core-js@3.6.5 postinstall /opt/build/repo/node_modules/@jimp/plugin-crop/node_modules/core-js
12:12:18 PM: > node -e "try{require('./postinstall')}catch(e){}"
12:12:18 PM: > core-js@3.6.5 postinstall /opt/build/repo/node_modules/@jimp/plugin-displace/node_modules/core-js
12:12:18 PM: > node -e "try{require('./postinstall')}catch(e){}"
12:12:18 PM: > core-js@3.6.5 postinstall /opt/build/repo/node_modules/@jimp/plugin-dither/node_modules/core-js
12:12:18 PM: > node -e "try{require('./postinstall')}catch(e){}"
12:12:18 PM: > core-js@3.6.5 postinstall /opt/build/repo/node_modules/@jimp/plugin-fisheye/node_modules/core-js
12:12:18 PM: > node -e "try{require('./postinstall')}catch(e){}"
12:12:19 PM: > core-js@3.6.5 postinstall /opt/build/repo/node_modules/@jimp/plugin-flip/node_modules/core-js
12:12:19 PM: > node -e "try{require('./postinstall')}catch(e){}"
12:12:19 PM: > core-js@3.6.5 postinstall /opt/build/repo/node_modules/@jimp/plugin-gaussian/node_modules/core-js
12:12:19 PM: > node -e "try{require('./postinstall')}catch(e){}"
12:12:19 PM: > core-js@3.6.5 postinstall /opt/build/repo/node_modules/@jimp/plugin-invert/node_modules/core-js
12:12:19 PM: > node -e "try{require('./postinstall')}catch(e){}"
12:12:19 PM: > core-js@3.6.5 postinstall /opt/build/repo/node_modules/@jimp/plugin-mask/node_modules/core-js
12:12:19 PM: > node -e "try{require('./postinstall')}catch(e){}"
12:12:19 PM: > core-js@3.6.5 postinstall /opt/build/repo/node_modules/@jimp/plugin-normalize/node_modules/core-js
12:12:19 PM: > node -e "try{require('./postinstall')}catch(e){}"
12:12:19 PM: > core-js@3.6.5 postinstall /opt/build/repo/node_modules/@jimp/plugin-print/node_modules/core-js
12:12:19 PM: > node -e "try{require('./postinstall')}catch(e){}"
12:12:19 PM: > core-js@3.6.5 postinstall /opt/build/repo/node_modules/@jimp/plugin-resize/node_modules/core-js
12:12:19 PM: > node -e "try{require('./postinstall')}catch(e){}"
12:12:19 PM: > core-js@3.6.5 postinstall /opt/build/repo/node_modules/@jimp/plugin-rotate/node_modules/core-js
12:12:19 PM: > node -e "try{require('./postinstall')}catch(e){}"
12:12:19 PM: > core-js@3.6.5 postinstall /opt/build/repo/node_modules/@jimp/plugin-scale/node_modules/core-js
12:12:19 PM: > node -e "try{require('./postinstall')}catch(e){}"
12:12:19 PM: > core-js@3.6.5 postinstall /opt/build/repo/node_modules/@jimp/plugin-shadow/node_modules/core-js
12:12:19 PM: > node -e "try{require('./postinstall')}catch(e){}"
12:12:19 PM: > core-js@3.6.5 postinstall /opt/build/repo/node_modules/@jimp/plugin-threshold/node_modules/core-js
12:12:19 PM: > node -e "try{require('./postinstall')}catch(e){}"
12:12:20 PM: > core-js@3.6.5 postinstall /opt/build/repo/node_modules/@jimp/plugins/node_modules/core-js
12:12:20 PM: > node -e "try{require('./postinstall')}catch(e){}"
12:12:20 PM: > core-js@3.6.5 postinstall /opt/build/repo/node_modules/@jimp/png/node_modules/core-js
12:12:20 PM: > node -e "try{require('./postinstall')}catch(e){}"
12:12:20 PM: > core-js@3.6.5 postinstall /opt/build/repo/node_modules/@jimp/tiff/node_modules/core-js
12:12:20 PM: > node -e "try{require('./postinstall')}catch(e){}"
12:12:20 PM: > core-js@3.6.5 postinstall /opt/build/repo/node_modules/@jimp/types/node_modules/core-js
12:12:20 PM: > node -e "try{require('./postinstall')}catch(e){}"
12:12:20 PM: > core-js@3.6.5 postinstall /opt/build/repo/node_modules/@jimp/utils/node_modules/core-js
12:12:20 PM: > node -e "try{require('./postinstall')}catch(e){}"
12:12:20 PM: > core-js@2.6.11 postinstall /opt/build/repo/node_modules/core-js
12:12:20 PM: > node -e "try{require('./postinstall')}catch(e){}"
12:12:20 PM: > core-js-pure@3.6.5 postinstall /opt/build/repo/node_modules/core-js-pure
12:12:20 PM: > node -e "try{require('./postinstall')}catch(e){}"
12:12:21 PM: > core-js@3.6.5 postinstall /opt/build/repo/node_modules/jimp/node_modules/core-js
12:12:21 PM: > node -e "try{require('./postinstall')}catch(e){}"
12:12:22 PM: > gatsby-telemetry@1.3.14 postinstall /opt/build/repo/node_modules/gatsby-telemetry
12:12:22 PM: > node src/postinstall.js || true
12:12:22 PM: > cwebp-bin@5.1.0 postinstall /opt/build/repo/node_modules/cwebp-bin
12:12:22 PM: > node lib/install.js
12:12:23 PM:   ✔ cwebp pre-build test passed successfully
12:12:23 PM: > mozjpeg@6.0.1 postinstall /opt/build/repo/node_modules/mozjpeg
12:12:23 PM: > node lib/install.js
12:12:23 PM:   ✔ mozjpeg pre-build test passed successfully
12:12:23 PM: > pngquant-bin@5.0.2 postinstall /opt/build/repo/node_modules/pngquant-bin
12:12:23 PM: > node lib/install.js
12:12:24 PM:   ✔ pngquant pre-build test passed successfully
12:12:24 PM: > gatsby-cli@2.12.52 postinstall /opt/build/repo/node_modules/gatsby/node_modules/gatsby-cli
12:12:24 PM: > node scripts/postinstall.js
12:12:24 PM: > gatsby@2.23.12 postinstall /opt/build/repo/node_modules/gatsby
12:12:24 PM: > node scripts/postinstall.js
12:12:27 PM: npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules/fsevents):
12:12:27 PM: npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
12:12:27 PM: npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.1.3 (node_modules/chokidar/node_modules/fsevents):
12:12:27 PM: npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.1.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
12:12:27 PM: added 2337 packages from 1287 contributors and audited 2346 packages in 77.733s
12:12:30 PM: 146 packages are looking for funding
12:12:30 PM:   run `npm fund` for details
12:12:30 PM: found 696 vulnerabilities (662 low, 34 high)
12:12:30 PM:   run `npm audit fix` to fix them, or `npm audit` for details
12:12:30 PM: NPM modules installed
12:12:30 PM: Started restoring cached go cache
12:12:30 PM: Finished restoring cached go cache
12:12:31 PM: go version go1.14.4 linux/amd64
12:12:31 PM: go version go1.14.4 linux/amd64
12:12:31 PM: Installing missing commands
12:12:31 PM: Verify run directory
12:12:32 PM: ​
12:12:32 PM: ┌─────────────────────────────┐
12:12:32 PM: │        Netlify Build        │
12:12:32 PM: └─────────────────────────────┘
12:12:32 PM: ​
12:12:32 PM: ❯ Version
12:12:32 PM:   @netlify/build 4.5.2
12:12:32 PM: ​
12:12:32 PM: ❯ Flags
12:12:32 PM:   deployId: 5f75b9412c7b1c0008acc99d
12:12:32 PM:   mode: buildbot
12:12:32 PM: ​
12:12:32 PM: ❯ Current directory
12:12:32 PM:   /opt/build/repo
12:12:32 PM: ​
12:12:32 PM: ❯ Config file
12:12:32 PM:   No config file was defined: using default values.
12:12:32 PM: ​
12:12:32 PM: ❯ Context
12:12:32 PM:   production
12:12:32 PM: ​
12:12:32 PM: ┌───────────────────────────────────┐
12:12:32 PM: │ 1. Build command from Netlify app │
12:12:32 PM: └───────────────────────────────────┘
12:12:32 PM: ​
12:12:32 PM: $ gatsby build
12:12:36 PM: success open and validate gatsby-configs - 0.028s
12:12:37 PM: success load plugins - 1.101s
12:12:37 PM: success onPreInit - 0.019s
12:12:37 PM: success delete html and css files from previous builds - 0.044s
12:12:37 PM: success initialize cache - 0.091s
12:12:37 PM: success copy gatsby files - 0.045s
12:12:37 PM: success onPreBootstrap - 0.011s
12:12:37 PM: success createSchemaCustomization - 0.028s
12:12:38 PM: success source and transform nodes - 0.156s
12:12:38 PM: success building schema - 0.404s
12:12:38 PM: success createPages - 0.001s
12:12:38 PM: success createPagesStatefully - 0.104s
12:12:38 PM: success updating schema - 0.038s
12:12:38 PM: success onPreExtractQueries - 0.001s
12:12:39 PM: success extract queries from components - 0.467s
12:12:39 PM: success write out redirect data - 0.001s
12:12:39 PM: success Build manifest and related icons - 0.275s
12:12:39 PM: success onPostBootstrap - 0.277s
12:12:39 PM: info bootstrap finished - 6.714s
12:12:39 PM: success run static queries - 0.337s - 2/2 5.94/s
12:12:39 PM: success run page queries - 0.018s - 4/4 226.18/s
12:12:39 PM: success write out requires - 0.006s
12:13:19 PM: success Building production JavaScript and CSS bundles - 40.055s
12:13:20 PM: success Rewriting compilation hashes - 0.008s
12:13:30 PM: failed Building static HTML for pages - 10.612s
12:13:30 PM: error Building static HTML failed for path "/"
12:13:30 PM: 
12:13:30 PM:   19 |   } catch (error) {
12:13:30 PM:   20 |     if (error.name === "CssSyntaxError") {
12:13:30 PM: > 21 |       throw new Error("Pathname: " + pathname + " " + error.toString());
12:13:30 PM:      |             ^
12:13:30 PM:   22 |     }
12:13:30 PM:   23 | 
12:13:30 PM:   24 |     throw error;
12:13:30 PM: 
12:13:30 PM:   WebpackError: Pathname: / CssSyntaxError: <css input>:3048:5: Unknown word
12:13:30 PM:   
12:13:30 PM:   - autoprefixer.js:21 
12:13:30 PM:     node_modules/gatsby-plugin-material-ui/autoprefixer.js:21:13
12:13:30 PM:   
12:13:30 PM:   - gatsby-ssr.js:54 
12:13:30 PM:     node_modules/gatsby-plugin-material-ui/gatsby-ssr.js:54:65
12:13:30 PM:   
12:13:30 PM: 
12:13:30 PM: not finished Generating image thumbnails - 51.515s
12:13:31 PM: ​
12:13:31 PM: ┌─────────────────────────────┐
12:13:31 PM: │   "build.command" failed    │
12:13:31 PM: └─────────────────────────────┘
12:13:31 PM: ​
12:13:31 PM:   Error message
12:13:31 PM:   Command failed with exit code 1: gatsby build
12:13:31 PM: ​
12:13:31 PM:   Error location
12:13:31 PM:   In Build command from Netlify app:
12:13:31 PM:   gatsby build
12:13:31 PM: ​
12:13:31 PM:   Resolved config
12:13:31 PM:   build:
12:13:31 PM:     command: gatsby build
12:13:31 PM:     commandOrigin: ui
12:13:31 PM:     environment:
12:13:31 PM:       - APP_ID
12:13:31 PM:       - SITE_URL
12:13:31 PM:     publish: /opt/build/repo/public
12:13:31 PM: Caching artifacts
12:13:31 PM: Started saving node modules
12:13:31 PM: Finished saving node modules
12:13:31 PM: Started saving build plugins
12:13:31 PM: Finished saving build plugins
12:13:31 PM: Started saving pip cache
12:13:31 PM: Finished saving pip cache
12:13:31 PM: Started saving emacs cask dependencies
12:13:31 PM: Finished saving emacs cask dependencies
12:13:31 PM: Started saving maven dependencies
12:13:31 PM: Finished saving maven dependencies
12:13:31 PM: Started saving boot dependencies
12:13:31 PM: Finished saving boot dependencies
12:13:31 PM: Started saving go dependencies
12:13:31 PM: Finished saving go dependencies
12:13:33 PM: Error running command: Build script returned non-zero exit code: 2
12:13:33 PM: Failing build: Failed to build site
12:13:34 PM: Failed during stage 'building site': Build script returned non-zero exit code: 2
12:13:34 PM: Finished processing build request in 2m34.470935385s

Webpack stats json file

{"errors":[],"warnings":[],"namedChunkGroups":{"app":{"chunks":[9,8,4],"assets":["webpack-runtime-c6468469d621b8516995.js","webpack-runtime-c6468469d621b8516995.js.map","framework-8dcecaaefd71e2213eb2.js","framework-8dcecaaefd71e2213eb2.js.map","app-b5b3449fddd253585ebd.js","app-b5b3449fddd253585ebd.js.map"],"children":{},"childAssets":{}},"component---src-pages-404-js":{"chunks":[0,1,5],"assets":["1bfc9850-cf95581b422084005dae.js","1bfc9850-cf95581b422084005dae.js.map","commons-4989fdb9fc464d2fa885.js","commons-4989fdb9fc464d2fa885.js.map","component---src-pages-404-js-7392c156eaee193aa347.js","component---src-pages-404-js-7392c156eaee193aa347.js.map"],"children":{},"childAssets":{}},"component---src-pages-index-js":{"chunks":[0,3,1,2,6],"assets":["1bfc9850-cf95581b422084005dae.js","1bfc9850-cf95581b422084005dae.js.map","95b64a6e-e9a49bbe13e81938b566.js","95b64a6e-e9a49bbe13e81938b566.js.map","commons-4989fdb9fc464d2fa885.js","commons-4989fdb9fc464d2fa885.js.map","74ee3ecf776e9f85f34d042b8a1e4f4bd7b77e3d-b6d232699ff8eef29baa.js","74ee3ecf776e9f85f34d042b8a1e4f4bd7b77e3d-b6d232699ff8eef29baa.js.map","component---src-pages-index-js-24812f64b3b4c0152bac.js","component---src-pages-index-js-24812f64b3b4c0152bac.js.map"],"children":{},"childAssets":{}},"component---src-pages-kitchen-js":{"chunks":[0,1,2,7],"assets":["1bfc9850-cf95581b422084005dae.js","1bfc9850-cf95581b422084005dae.js.map","commons-4989fdb9fc464d2fa885.js","commons-4989fdb9fc464d2fa885.js.map","74ee3ecf776e9f85f34d042b8a1e4f4bd7b77e3d-b6d232699ff8eef29baa.js","74ee3ecf776e9f85f34d042b8a1e4f4bd7b77e3d-b6d232699ff8eef29baa.js.map","component---src-pages-kitchen-js-7a8416b9e9965a9e634c.js","component---src-pages-kitchen-js-7a8416b9e9965a9e634c.js.map"],"children":{},"childAssets":{}}},"assetsByChunkName":{"app":["webpack-runtime-c6468469d621b8516995.js","framework-8dcecaaefd71e2213eb2.js","app-b5b3449fddd253585ebd.js"],"component---src-pages-404-js":["1bfc9850-cf95581b422084005dae.js","commons-4989fdb9fc464d2fa885.js","component---src-pages-404-js-7392c156eaee193aa347.js"],"component---src-pages-index-js":["1bfc9850-cf95581b422084005dae.js","95b64a6e-e9a49bbe13e81938b566.js","commons-4989fdb9fc46

hmm. thanks for letting us know its working locally. could it be a case issue?

Thanks for the reply. I resolve to build the app locally with gatsby build and deployed it using netlify-cli. However, I would try renaming the files and imports to see if your suggestion works.

1 Like