I'm using Create-React-App v2 and have installed node-sass. I also wish to use CSS Modules so I've changed the extensions and imports to .module.scss.
Note: I've imported the variables (_color.scss, _type.scss) into each component's stylesheet but it is not working so I've manually imported each needed variable to each component's stylesheet for now.
So now the app works locally but crashes in Heroku. Heroku logs states build failed and give 3 build output links for troubleshooting assistance. Here are the following build outputs.
1ST BUILD OUTPUT
-----> Node.js app detected
-----> Creating runtime environment
NPM_CONFIG_LOGLEVEL=error
NODE_ENV=production
NODE_MODULES_CACHE=true
NODE_VERBOSE=false
-----> Installing binaries
engines.node (package.json): unspecified
engines.npm (package.json): unspecified (use default)
Resolving node version 10.x...
Downloading and installing node 10.15.3...
Using default npm version: 6.4.1
-----> Restoring cache
- node_modules
-----> Installing dependencies
Installing node modules (package.json + package-lock)
audited 36784 packages in 17.665s
found 63 low severity vulnerabilities
run `npm audit fix` to fix them, or `npm audit` for details
-----> Build
Running build
> [email protected] build /tmp/build_946ff21a3c8a665eda74215ba467f646
> react-scripts build
Creating an optimized production build...
Failed to compile.
./src/App.js
Cannot find file './Components/Portfolio/Portfolio' in './src'.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build: `react-scripts build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /tmp/npmcache.EQOTa/_logs/2019-03-11T23_54_27_075Z-debug.log
-----> Change to Node.js build process
Heroku has begun executing the "build" script defined in package.json
during Node.js builds.
Read more: https://devcenter.heroku.com/changelog-items/1573
-----> Build failed
We're sorry this build is failing! You can troubleshoot common issues here:
https://devcenter.heroku.com/articles/troubleshooting-node-deploys
Some possible problems:
- Node version not specified in package.json
https://devcenter.heroku.com/articles/nodejs-support#specifying-a-node-js-version
Love,
Heroku
! Push rejected, failed to compile Node.js app.
! Push failed
2ND BUILD OUTPUT
-----> Node.js app detected
-----> Creating runtime environment
NPM_CONFIG_LOGLEVEL=error
NODE_ENV=production
NODE_MODULES_CACHE=true
NODE_VERBOSE=false
-----> Installing binaries
engines.node (package.json): unspecified
engines.npm (package.json): unspecified (use default)
Resolving node version 10.x...
Downloading and installing node 10.15.3...
Using default npm version: 6.4.1
-----> Restoring cache
- node_modules
-----> Installing dependencies
Installing node modules (package.json + package-lock)
audited 36784 packages in 17.814s
found 63 low severity vulnerabilities
run `npm audit fix` to fix them, or `npm audit` for details
-----> Build
Running build
> [email protected] build /tmp/build_85b1987ab543478c5aee6f4728e8b330
> react-scripts build
Creating an optimized production build...
Failed to compile.
./src/App.js
Cannot find file './Components/Portfolio/Portfolio' in './src'.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build: `react-scripts build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /tmp/npmcache.htJgH/_logs/2019-03-12T00_00_58_185Z-debug.log
-----> Change to Node.js build process
Heroku has begun executing the "build" script defined in package.json
during Node.js builds.
Read more: https://devcenter.heroku.com/changelog-items/1573
-----> Build failed
We're sorry this build is failing! You can troubleshoot common issues here:
https://devcenter.heroku.com/articles/troubleshooting-node-deploys
Some possible problems:
- Node version not specified in package.json
https://devcenter.heroku.com/articles/nodejs-support#specifying-a-node-js-version
Love,
Heroku
! Push rejected, failed to compile Node.js app.
! Push failed
3RD BUILD OUTPUT
-----> Node.js app detected
-----> Creating runtime environment
NPM_CONFIG_LOGLEVEL=error
NODE_ENV=production
NODE_MODULES_CACHE=true
NODE_VERBOSE=false
-----> Installing binaries
engines.node (package.json): 10.5.0
engines.npm (package.json): unspecified (use default)
Resolving node version 10.5.0...
Downloading and installing node 10.5.0...
Using default npm version: 6.1.0
-----> Restoring cache
Cached directories were not restored due to a change in version of node, npm, yarn or stack
Module installation may take longer for this build
-----> Installing dependencies
Installing node modules (package.json + package-lock)
> [email protected] install /tmp/build_17cf925c197f17907d43d6369284d804/node_modules/node-sass
> node scripts/install.js
Downloading binary from https://github.com/sass/node-sass/releases/download/v4.11.0/linux-x64-64_binding.node
Download complete
Binary saved to /tmp/build_17cf925c197f17907d43d6369284d804/node_modules/node-sass/vendor/linux-x64-64/binding.node
Caching binary to /tmp/npmcache.Dfkzs/node-sass/4.11.0/linux-x64-64_binding.node
> [email protected] postinstall /tmp/build_17cf925c197f17907d43d6369284d804/node_modules/node-sass
> node scripts/build.js
Binary found at /tmp/build_17cf925c197f17907d43d6369284d804/node_modules/node-sass/vendor/linux-x64-64/binding.node
Testing binary
Binary is fine
added 1883 packages from 750 contributors and audited 36784 packages in 39.346s
found 63 low severity vulnerabilities
run `npm audit fix` to fix them, or `npm audit` for details
-----> Build
Running build
> [email protected] build /tmp/build_17cf925c197f17907d43d6369284d804
> react-scripts build
Creating an optimized production build...
Failed to compile.
./src/App.js
Cannot find file './Components/Portfolio/Portfolio' in './src'.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build: `react-scripts build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /tmp/npmcache.Dfkzs/_logs/2019-03-12T01_08_21_381Z-debug.log
-----> Change to Node.js build process
Heroku has begun executing the "build" script defined in package.json
during Node.js builds.
Read more: https://devcenter.heroku.com/changelog-items/1573
-----> Build failed
We're sorry this build is failing! You can troubleshoot common issues here:
https://devcenter.heroku.com/articles/troubleshooting-node-deploys
If you're stuck, please submit a ticket so we can help:
https://help.heroku.com/
Love,
Heroku
! Push rejected, failed to compile Node.js app.
! Push failed
Solutions I've attempted:
I've been stuck for awhile and would really appreciate any help. Thanks in advance!
Package installed
• Node.js v10.15.3 to /usr/local/bin/node
• npm v6.4.1 to /usr/local/bin/npm
Okay... this project needs a lot of stylesheet reworking.
All of your component level .scss files should be within the same folder as the component that requires it. Any partial files should be imported within the component-level scss that needs them. Some of your stylesheets are doing it, but some aren't. Also, for whatever reason, you're importing partials within a css stylesheet and importing partials within scss stylesheets. Just stick to scss stylesheets!
To summarize:
component should be within the
same folder as the component.Right now you have partials, like _app_portfolio.scss files under Sass and component level Portfolio.module.scss stylesheets which are separately being required for Portfolio.js. This is an antipattern. Partials should be reusebale stylesheets that will imported into multiple component level stylesheets for re-usage.
For example, you should structure your app like so: (for simplicity, your main directory folders should be lowercase):
├── src
| ├── components
| | └── Portfolio
| | ├── Portfolio.js
| | └── Portfolio.scss (non-partial file, this component-level stylesheet contains all of styles required for Portfolio.js)
| |
| ├── images
| ├── styles
| | ├── base
| | | └── _base.scss (partial file, include any DOM-level styles like "a" or "p", or "div", "body", "html" ... etc.)
| | |
| | ├── exts
| | | └── _extensions.scss (partial file, include any extended styles like ".clear fix", which is a classname that'll contain repetitive style patterns)
| | |
| | ├── globals
| | | └── globals.scss (non-partial file, include any GLOBAL stylesheets, like "normalize.css", this stylesheet will be directly imported into ./src/index.js like so: import "./styles/globals/globals.scss";)
| | |
| | ├── mixins
| | | └── _mixins.scss (partial file, define your mixins that'll be shared with component-level scss)
| | |
| | ├── vars
| | | └── _vars.scss (partial file, define your variables that'll be shared with component-level scss)
| | |
| | └── index.scss (OPTIONAL non-partial file that imports all of the partial files above, then this file can be imported into a component-level stylesheet. Instead of writing 4 imports for base, exts, mixins and vars, you'll just do: @import '../path/to/styles/index.scss'; now you have included all 4 partials within 1 import)
| |
| └── index.js
How to implement the above...
components/Portfolio/Portfolio.js
import React from "react";
import Profile from "../Profile/Profile";
import { portfolioContainer } from "./Portfolio.scss"; // import the className, if there are many classes, then just import them as "styles" from './stylesheet.scss'; then use: "styles.portfolioContainer", "styles.example", "styles.example2" ...etc
const Portfolio = () => {
return (
<div className={portfolioContainer}>
<Profile />
</div>
);
};
export default Portfolio;
components/Portfolio/Portfolio.scss
@import '../../styles/vars/vars.scss'; // partial file import, now we can use $variables
@import '../../styles/mixins/mixins.scss'; // partial file import, now we can use @include mixinname();
@import '../../styles/exts/extensions.scss'; // partial file import, now we can use @extend .classname;
.portfolioContainer {
@include grid-template-columns(1);
color: $brightgreen;
background: url('../../images/example.png'); // include your image imports within the component-level stylesheet -- if you import it in a partial file, then import that partial within a stylesheet, then you'll run into some pathing issues. The path defined will be relative to the partial and won't be an absolute path to the image when imported within the component-level stylesheet.
display: flex;
flex-flow: column wrap;
height: 100vh;
&::after {
@extend .clear-fix;
}
}
Take a look at this Sass Basics Guide.
If you're having a hard time understanding, please see my react-starter-kit, which includes notes within styles/index.scss and styles/globals/globals.scss and how to utilize partials in components/Home/Home.scss and be imported into components/Home/Home.js and how to utilize globals in src/index.js.
Since you're using the create-react-app, you may need a sass-compiler to compile the .scss files to one or many .css files. Unfortunately, I don't use the CRA, so you'll have to dive into the docs to find out how.