node-sass and Node 9.1.0

So the other day I discovered that I could use Scss and CSS Modules in React applications, and how to configure my own webpack-dev.config.js and webpack-prod.config.js. It's pretty much the same configuration as with CRA (create-react-app), but with the addition of SCSS configuration on top of CSS. I have already tested it and it works like a charm. But this is not the subject of this post.

Here I want to talk about node-sass compatibility with React 16.1.1. When I created my Portfolio site with React and SCSS, React 16.0.0 had just come out. That is the version of React that I use there. I initially used node-sass 4.5.3 and don't remember having any problems with it.

Then I upgraded my version of Node recently to version 9.1.0. And I still had node-sass 4.5.3. When I tried to run the webpack dev server with npm run serve (my own custom script), I got the following error in the console:

Module build failed: Error: Node Sass does not yet support your current environment: OS X 64-bit with Unsupported runtime (59)

I had never encountered this before and did not know what it meant. All I knew was that node-sass was throwing an error in the console, and my application failed to render to the page. After I searched a bit for a fix via Google, I came across the following thread in node-sass issues:

Module build failed: Error: Node Sass does not yet support your current environment: OS X 64-bit with Unsupported runtime (59) #2142

There were many different suggestions/successful fixes from various people, none of which worked for me. Except for the one at the bottom. The method did not work, but changing to the suggested version of node-sass did:

marcvangend commented 4 days ago
Downgrading Node may not be necessary. I had the same error (albeit on Linux: "Node Sass does not yet support your current environment: Linux 64-bit with Unsupported runtime (59)") running node-sass 4.5.3, installed as dependency of gulp-sass. A regular npm update will only check the top-level packages, but after running npm --depth 9999 update, node-sass was updated to 4.7.2 and the problem was solved.

All I did was uninstall node-sass 4.5.3 and then install node-sass 4.7.2:

npm uninstall node-sass

npm i node-sass@4.7.2

And that was it! So if you get this error because initially you might have been using an earlier version of Node/NPM (< 9.1.0) in which you had no compatibility issues with node-sass and suddenly you do upon upgrading to the latest (in my case, 9.1.0) version of Node/NPM, just make sure to upgrade node-sass to version 4.7.2.

Happy Sassing!

Module build failed: Error: Node Sass does not yet support your current environment: OS X 64-bit with Unsupported runtime (59) #2142

CSS Modules & Sass in Create React App