Attempting to deploy to heroku for the first time, and i've been getting this sasserror which causes the build to fail and reject.
Steps taken for resolution
Question
Terminal response
remote:
remote: -----> Building on the Heroku-20 stack
remote: -----> Using buildpack: heroku/nodejs
remote: -----> Node.js app detected
remote:
remote: -----> Creating runtime environment
remote:
remote: NPM_CONFIG_LOGLEVEL=error
remote: NODE_VERBOSE=false
remote: NODE_ENV=production
remote: NODE_MODULES_CACHE=true
remote:
remote: -----> Installing binaries
remote: engines.node (package.json): 10.x
remote: engines.npm (package.json): unspecified (use default)
remote:
remote: Resolving node version 10.x...
remote: Downloading and installing node 10.24.1...
remote: Using default npm version: 6.14.12
remote:
remote: -----> Installing dependencies
remote: Installing node modules
remote:
remote: > [email protected] postinstall /tmp/build_f7e8f26d/node_modules/nodemon
remote: > node bin/postinstall || exit 0
remote:
remote: Love nodemon? You can now support the project via the open collective:
remote: > https://opencollective.com/nodemon/donate
remote:
remote: added 358 packages in 10.306s
remote:
remote: -----> Build
remote: Running heroku-postbuild
remote:
remote: > [email protected] heroku-postbuild /tmp/build_f7e8f26d
remote: > NPM_CONFIG_PRODUCTION=false npm install --prefix client && npm run build --prefix client
remote:
remote:
remote: > [email protected] install /tmp/build_f7e8f26d/client/node_modules/node-sass
remote: > node scripts/install.js
remote:
remote: Downloading binary from https://github.com/sass/node-sass/releases/download/v6.0.0/linux-x64-64_binding.node
remote: Download complete
remote: Binary saved to /tmp/build_f7e8f26d/client/node_modules/node-sass/vendor/linux-x64-64/binding.node
remote: Caching binary to /tmp/npmcache.gWg6N/node-sass/6.0.0/linux-x64-64_binding.node
remote:
remote: > [email protected] postinstall /tmp/build_f7e8f26d/client/node_modules/babel-runtime/node_modules/core-js
remote: > node -e "try{require('./postinstall')}catch(e){}"
remote:
remote:
remote: > [email protected] postinstall /tmp/build_f7e8f26d/client/node_modules/core-js
remote: > node -e "try{require('./postinstall')}catch(e){}"
remote:
remote:
remote: > [email protected] postinstall /tmp/build_f7e8f26d/client/node_modules/core-js-pure
remote: > node -e "try{require('./postinstall')}catch(e){}"
remote:
remote:
remote: > [email protected] postinstall /tmp/build_f7e8f26d/client/node_modules/ejs
remote: > node ./postinstall.js
remote:
remote:
remote: > [email protected] postinstall /tmp/build_f7e8f26d/client/node_modules/node-sass
remote: > node scripts/build.js
remote:
remote: Binary found at /tmp/build_f7e8f26d/client/node_modules/node-sass/vendor/linux-x64-64/binding.node
remote: Testing binary
remote: Binary is fine
remote: added 2124 packages from 812 contributors and audited 2131 packages in 43.95s
remote:
remote: 139 packages are looking for funding
remote: run `npm fund` for details
remote:
remote: found 81 vulnerabilities (80 moderate, 1 high)
remote: run `npm audit fix` to fix them, or `npm audit` for details
remote:
remote: > [email protected] build /tmp/build_f7e8f26d/client
remote: > react-scripts build
remote:
remote: Creating an optimized production build...
remote: Failed to compile.
remote:
remote: ./src/App.scss
remote: SassError: File to import not found or unreadable: ./scss/_variables.scss.
remote: on line 2 of src/App.scss
remote: >> @import './scss/_variables.scss';
remote:
remote: ^
remote:
remote:
remote: npm ERR! code ELIFECYCLE
remote: npm ERR! errno 1
remote: npm ERR! [email protected] build: `react-scripts build`
remote: npm ERR! Exit status 1
remote: npm ERR!
remote: npm ERR! Failed at the [email protected] build script.
remote: npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
remote:
remote: npm ERR! A complete log of this run can be found in:
remote: npm ERR! /tmp/npmcache.gWg6N/_logs/2021-05-25T08_12_53_624Z-debug.log
remote: npm ERR! code ELIFECYCLE
remote: npm ERR! errno 1
remote: npm ERR! [email protected] heroku-postbuild: `NPM_CONFIG_PRODUCTION=false npm install --prefix client && npm run build --prefix client`
remote: npm ERR! Exit status 1
remote: npm ERR!
remote: npm ERR! Failed at the [email protected] heroku-postbuild script.
remote: npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
remote:
remote: npm ERR! A complete log of this run can be found in:
remote: npm ERR! /tmp/npmcache.gWg6N/_logs/2021-05-25T08_12_53_642Z-debug.log
remote:
remote: -----> Build failed
remote:
remote: We're sorry this build is failing! You can troubleshoot common issues here:
remote: https://devcenter.heroku.com/articles/troubleshooting-node-deploys
remote:
remote: If you're stuck, please submit a ticket so we can help:
remote: https://help.heroku.com/
remote:
remote: Love,
remote: Heroku
remote:
remote: ! Push rejected, failed to compile Node.js app.
remote:
remote: ! Push failed
App.scss
// Abstracts
@import 'scss/variables';
@import 'scss/mixins';
// Base
@import 'scss/globals';
// Components
@import 'scss/header';
@import 'scss/showcase';
@import 'scss/hero';
@import 'scss/feature';
@import 'scss/postLanding';
@import 'scss/footer';
@import 'scss/auth';
@import 'scss/postList';
...etc
client package json
{
"name": "client",
"version": "0.1.0",
"private": true,
"dependencies": {
"axios": "^0.21.1",
"cra-template": "1.0.3",
"moment": "^2.29.1",
"node-sass": "^6.0.0",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-helmet": "^6.1.0",
"react-moment": "^1.0.0",
"react-redux": "^7.2.1",
"react-router-dom": "^5.2.0",
"react-scripts": "^4.0.3",
"redux": "^4.0.5",
"redux-devtools-extension": "^2.13.8",
"redux-thunk": "^2.3.0",
"uuid": "^8.3.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"proxy": "http://127.0.0.1:5000",
"secure": false,
"devDependencies": {}
}
server package json
{
"name": "server",
"version": "1.0.0",
"description": "jounii",
"main": "server.js",
"scripts": {
"start": "node server.js",
"server": "nodemon server.js",
"client": "npm start --prefix client",
"dev": "concurrently \"npm run server\" \"npm run client\" ",
"heroku-postbuild": "NPM_CONFIG_PRODUCTION=false npm install --prefix client && npm run build --prefix client"
},
"author": "Andrew Huang",
"license": "MIT",
"dependencies": {
"aws-sdk": "^2.771.0",
"axios": "^0.21.1",
"bcryptjs": "^2.4.3",
"colors": "^1.4.0",
"concurrently": "^5.3.0",
"dotenv": "^8.2.0",
"express": "^4.17.1",
"express-async-handler": "^1.1.4",
"faker": "^5.1.0",
"jsonwebtoken": "^8.5.1",
"lodash": "^4.17.21",
"mongoose": "^5.12.3",
"morgan": "^1.10.0",
"multer": "^1.4.2",
"multer-s3": "^2.9.0",
"node-geocoder": "^3.27.0",
"nodemailer": "^6.6.0",
"request": "^2.88.2"
},
"devDependencies": {
"nodemon": "^2.0.4"
},
"engines": {
"node": "10.x"
}
}
File tree enter image description here
Try this:
https://create-react-app.dev/docs/adding-a-sass-stylesheet
f you set SASS_PATH=node_modules:src, this will allow you to do imports like
@import 'styles/colors'; // assuming a styles directory under src/, where _colors.scss partial file exists.
@import 'nprogress/nprogress'; // importing a css file from the nprogress node module