Home
Support Forums

Netlify Build Fails - SCSS and Vue build fails

Hi there,

I’m a newbie to Netlify and using Vue CLI.

My site fails to build and I’m currently getting this error message:

8:34:10 PM: Waiting for other deploys from your team to complete. Check the queue: https://app.netlify.com/teams/builtbybea/builds
8:35:24 PM: Build ready to start
8:35:26 PM: build-image version: 2cee85eb7f808bf3b6e87378c5307f9411f0a332
8:35:26 PM: build-image tag: v3.8.0
8:35:26 PM: buildbot version: cfefda0a665468fabfafc38698dc693541f06929
8:35:26 PM: Building without cache
8:35:26 PM: Starting to prepare the repo for build
8:35:26 PM: No cached dependencies found. Cloning fresh repo
8:35:26 PM: git clone https://github.com/builtbybea/breakable-toy
8:35:27 PM: Preparing Git Reference refs/heads/main
8:35:27 PM: Parsing package.json dependencies
8:35:28 PM: Starting build script
8:35:28 PM: Installing dependencies
8:35:28 PM: Python version set to 2.7
8:35:29 PM: v12.18.0 is already installed.
8:35:30 PM: Now using node v12.18.0 (npm v6.14.4)
8:35:30 PM: Started restoring cached build plugins
8:35:30 PM: Finished restoring cached build plugins
8:35:30 PM: Attempting ruby version 2.7.2, read from environment
8:35:31 PM: Using ruby version 2.7.2
8:35:31 PM: Using PHP version 5.6
8:35:31 PM: Started restoring cached node modules
8:35:31 PM: Finished restoring cached node modules
8:35:31 PM: Installing NPM modules using NPM version 6.14.4
8:36:05 PM: > yorkie@2.0.0 install /opt/build/repo/node_modules/yorkie
8:36:05 PM: > node bin/install.js
8:36:05 PM: CI detected, skipping Git hooks installation
8:36:05 PM: > node-sass@4.14.1 install /opt/build/repo/node_modules/node-sass
8:36:05 PM: > node scripts/install.js
8:36:05 PM: Downloading binary from https://github.com/sass/node-sass/releases/download/v4.14.1/linux-x64-72_binding.node
8:36:06 PM: Download complete
8:36:06 PM: Binary saved to /opt/build/repo/node_modules/node-sass/vendor/linux-x64-72/binding.node
8:36:06 PM: Caching binary to /opt/buildhome/.npm/node-sass/4.14.1/linux-x64-72_binding.node
8:36:06 PM: > highlight.js@9.18.5 postinstall /opt/build/repo/node_modules/cli-highlight/node_modules/highlight.js
8:36:06 PM: > node deprecated.js
8:36:06 PM: -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*
8:36:06 PM: 
8:36:06 PM:   Verion 9 of Highlight.js has reached EOL.  It will no longer
8:36:06 PM:   be supported or receive security updates in the future.
8:36:06 PM:   Please upgrade to version 10 or encourage your indirect
8:36:06 PM:   dependencies to do so.
8:36:06 PM:   For more info:
8:36:06 PM:   
8:36:06 PM:   https://github.com/highlightjs/highlight.js/issues/2877
8:36:06 PM:   https://github.com/highlightjs/highlight.js/blob/master/VERSION_10_UPGRADE.md
8:36:06 PM:  
8:36:06 PM: -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*
8:36:06 PM: > core-js@3.6.5 postinstall /opt/build/repo/node_modules/core-js
8:36:06 PM: > node -e "try{require('./postinstall')}catch(e){}"
8:36:06 PM: > core-js-pure@3.6.5 postinstall /opt/build/repo/node_modules/core-js-pure
8:36:06 PM: > node -e "try{require('./postinstall')}catch(e){}"
8:36:06 PM: > ejs@2.7.4 postinstall /opt/build/repo/node_modules/ejs
8:36:06 PM: > node ./postinstall.js
8:36:07 PM: > node-sass@4.14.1 postinstall /opt/build/repo/node_modules/node-sass
8:36:07 PM: > node scripts/build.js
8:36:07 PM: Binary found at /opt/build/repo/node_modules/node-sass/vendor/linux-x64-72/binding.node
8:36:07 PM: Testing binary
8:36:07 PM: Binary is fine
8:36:09 PM: npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules/webpack-dev-server/node_modules/fsevents):
8:36:09 PM: npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
8:36:09 PM: npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules/watchpack-chokidar2/node_modules/fsevents):
8:36:09 PM: npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
8:36:09 PM: npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.1.3 (node_modules/fsevents):
8:36:09 PM: npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.1.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
8:36:09 PM: added 1636 packages from 1025 contributors and audited 1642 packages in 36.702s
8:36:10 PM: 76 packages are looking for funding
8:36:10 PM:   run `npm fund` for details
8:36:10 PM: found 18 vulnerabilities (9 moderate, 9 high)
8:36:10 PM:   run `npm audit fix` to fix them, or `npm audit` for details
8:36:10 PM: NPM modules installed
8:36:10 PM: Started restoring cached go cache
8:36:10 PM: Finished restoring cached go cache
8:36:10 PM: go version go1.14.4 linux/amd64
8:36:10 PM: go version go1.14.4 linux/amd64
8:36:10 PM: Installing missing commands
8:36:10 PM: Verify run directory
8:36:11 PM: ​
8:36:11 PM: ────────────────────────────────────────────────────────────────
8:36:11 PM:   Netlify Build                                                 
8:36:11 PM: ────────────────────────────────────────────────────────────────
8:36:11 PM: ​
8:36:11 PM: ❯ Version
8:36:11 PM:   @netlify/build 12.12.0
8:36:11 PM: ​
8:36:11 PM: ❯ Flags
8:36:11 PM:   deployId: 60da24323527343722b9f8bc
8:36:11 PM: ​
8:36:11 PM: ❯ Current directory
8:36:11 PM:   /opt/build/repo
8:36:11 PM: ​
8:36:11 PM: ❯ Config file
8:36:11 PM:   No config file was defined: using default values.
8:36:11 PM: ​
8:36:11 PM: ❯ Context
8:36:11 PM:   production
8:36:11 PM: ​
8:36:11 PM: ────────────────────────────────────────────────────────────────
8:36:11 PM:   1. Build command from Netlify app                             
8:36:11 PM: ────────────────────────────────────────────────────────────────
8:36:11 PM: ​
8:36:11 PM: $ npm run build
8:36:11 PM: > breakable-toy@0.1.0 build /opt/build/repo
8:36:11 PM: > vue-cli-service build
8:36:12 PM: -  Building for production...
8:36:32 PM:  ERROR  Failed to compile with 1 errors7:36:32 PM
8:36:32 PM:  error  in ./src/assets/scss/main.scss
8:36:32 PM: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
8:36:32 PM: ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
8:36:32 PM: SassError: File to import not found or unreadable: components/imageInput.
8:36:32 PM:         on line 12 of src/assets/scss/main.scss
8:36:32 PM: >> @import "components/imageInput";
8:36:32 PM:    ^
8:36:32 PM:     at /opt/build/repo/node_modules/webpack/lib/NormalModule.js:316:20
8:36:32 PM:     at /opt/build/repo/node_modules/loader-runner/lib/LoaderRunner.js:367:11
8:36:32 PM:     at /opt/build/repo/node_modules/loader-runner/lib/LoaderRunner.js:233:18
8:36:32 PM:     at context.callback (/opt/build/repo/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
8:36:32 PM:     at Object.callback (/opt/build/repo/node_modules/sass-loader/dist/index.js:56:7)
8:36:32 PM:     at Object.done [as callback] (/opt/build/repo/node_modules/neo-async/async.js:8069:18)
8:36:32 PM:     at options.error (/opt/build/repo/node_modules/node-sass/lib/index.js:294:32)
8:36:32 PM:  @ ./src/main.js 7:0-33
8:36:32 PM:  @ multi ./src/main.js
8:36:32 PM:  ERROR  Build failed with errors.
8:36:32 PM: npm ERR! code ELIFECYCLE
8:36:32 PM: npm ERR! errno 1
8:36:32 PM: npm ERR! breakable-toy@0.1.0 build: `vue-cli-service build`
8:36:32 PM: npm ERR! Exit status 1
8:36:32 PM: npm ERR!
8:36:32 PM: npm ERR! Failed at the breakable-toy@0.1.0 build script.
8:36:32 PM: npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
8:36:32 PM: npm ERR! A complete log of this run can be found in:
8:36:32 PM: npm ERR!     /opt/buildhome/.npm/_logs/2021-06-28T19_36_32_404Z-debug.log
8:36:32 PM: ​
8:36:32 PM: ────────────────────────────────────────────────────────────────
8:36:32 PM:   "build.command" failed                                        
8:36:32 PM: ────────────────────────────────────────────────────────────────
8:36:32 PM: ​
8:36:32 PM:   Error message
8:36:32 PM:   Command failed with exit code 1: npm run build
8:36:32 PM: ​
8:36:32 PM:   Error location
8:36:32 PM:   In Build command from Netlify app:
8:36:32 PM:   npm run build
8:36:32 PM: ​
8:36:32 PM:   Resolved config
8:36:32 PM:   build:
8:36:32 PM:     command: npm run build
8:36:32 PM:     commandOrigin: ui
8:36:32 PM:     publish: /opt/build/repo/dist
8:36:32 PM:     publishOrigin: ui
8:36:32 PM:   functions:
8:36:32 PM:     '*': {}
8:36:32 PM: Caching artifacts
8:36:32 PM: Started saving node modules
8:36:32 PM: Finished saving node modules
8:36:32 PM: Started saving build plugins
8:36:32 PM: Finished saving build plugins
8:36:32 PM: Started saving pip cache
8:36:32 PM: Finished saving pip cache
8:36:32 PM: Started saving emacs cask dependencies
8:36:32 PM: Finished saving emacs cask dependencies
8:36:32 PM: Started saving maven dependencies
8:36:32 PM: Finished saving maven dependencies
8:36:32 PM: Started saving boot dependencies
8:36:32 PM: Finished saving boot dependencies
8:36:32 PM: Started saving rust rustup cache
8:36:32 PM: Finished saving rust rustup cache
8:36:32 PM: Started saving go dependencies
8:36:32 PM: Finished saving go dependencies
8:36:35 PM: Build failed due to a user error: Build script returned non-zero exit code: 2
8:36:35 PM: Creating deploy upload records
8:36:35 PM: Failing build: Failed to build site
8:36:35 PM: Failed during stage 'building site': Build script returned non-zero exit code: 2
8:36:35 PM: Finished processing build request in 1m9.50340174s

Is anyone able to explain what the current error message means and how to debug and fix

Thank you

Hey @builtbybea Welcome to Netlify Forums!

Like the logs mention, there is an error in your ./src/assets/scss/main.scss

8:36:32 PM:  error  in ./src/assets/scss/main.scss
8:36:32 PM: SassError: File to import not found or unreadable: components/imageInput.
8:36:32 PM:         on line 12 of src/assets/scss/main.scss

Hope this helps :slightly_smiling_face:

1 Like

Hi @kylesloper thanks for the speedy reply.

I’ve checked my code, there doesn’t appear to anything wrong.

The build works on my local machine, but I cannot understand why I’m getting the error when I build using Netlify

8:36:32 PM: SassError: File to import not found or unreadable: components/imageInput.
8:36:32 PM:         on line 12 of src/assets/scss/main.scss
8:36:32 PM: >> @import "components/imageInput";
8:36:32 PM:    ^

To investigate any further, we will need a Git repo :slightly_smiling_face:

1 Like

Hi @builtbybea,

We’ve already replied to your ticket in the helpdesk.

2 Likes

Thanks @kylesloper. @hrishikesh advised that the build was failing due to case sensitivity with my file names. E.g. rangeInput was rangeinput

If anyone ever stumbles on this thread and has a similar issue - please see [Support Guide] Netlify app builds locally but fails on deploy (case sensitivity)

1 Like