gatsby: Node Sass version 5.0.0 is incompatible with ^4.0.0.

Description

When adding the gatsby-plugin-sass to new project, I get the error in the terminal Generating development JavaScript bundle failed Node Sass version 5.0.0 is incompatible with ^4.0.0.

I saw this in stack overflow, seems like there was just a change. Hoping this is the issue: Error: Node Sass version 5.0.0 is incompatible with ^4.0.0

( I tested with a few different gatsby starters and the issue persisted regardless of starter also upgraded my node version just incase)

Steps to reproduce

download Gatsby default starter add gatsby-plugin-sass to project

Expected result

gatsby develop runs successfully

Actual result

Generating development JavaScript bundle failed Node Sass version 5.0.0 is incompatible with ^4.0.0.

Environment

System: OS: macOS 10.15.7 CPU: x64 Intel® Core™ i9-8950HK CPU @ 2.90GHz Shell: 3.2.57 - /bin/bash Binaries: Node: 14.15.0 - ~/.nvm/versions/node/v14.15.0/bin/node npm: 6.14.8 - ~/.nvm/versions/node/v14.15.0/bin/npm Browsers: Chrome: 86.0.4240.111 Safari: 14.0 npmPackages: gatsby: ^2.24.91 => 2.24.91 gatsby-plugin-sass: ^2.3.22 => 2.3.22

About this issue

Original URL
State: closed
Created 4 years ago
Reactions: 3
Comments: 20 (6 by maintainers)

Most upvoted comments

Another workaround is to just use Dart Sass instead of Node Sass. Especially since LibSass and Node Sass are deprecated

install Dart Sass:

npm i -D sass

update your gatsby-config.js :

before:

{
    resolve: `gatsby-plugin-sass`
}

after:

{
    resolve: `gatsby-plugin-sass`,
    options: {
        implementation: require('sass')
    },
}

+59

kimbaudi on Nov 10, 2020

Workaround: use node-sass@4.14.1 (Error: Node Sass version 5.0.0 is incompatible with ^4.0.0)

This is sass-loader requiring semver ^4.0.0, but node-sass just updated to 5.0.0 Pending PR https://github.com/webpack-contrib/sass-loader/pull/899

+25

nhevia on Nov 1, 2020

Going into Node Modules - looking for node-sass - looking for version - changing it to “4.14.1” instead of 5.0.0 then going to the main project package.json file and changing the version of node-sass to “^4.14.1” Worked for me as well 😃

+13

deG3nt3lm4n on Nov 12, 2020

Another workaround is to just use Dart Sass instead of Node Sass. Especially since LibSass and Node Sass are deprecated

This is what I’ve been doing as well. Wouldn’t it be better if the docs of gatsby-plugin-sass used sass instead of node-sass given the deprecation?

+11

andrew-chang-dewitt on Nov 11, 2020

simple fix worked for me: 1- open node-sass/package.json folder, on Mac:"replace{username} /Users/{username}/github/gasby-hello/node_modules/node-sass/package.json 2- change version to: “version”: “4.14.1”

fixed the problem for me while using “gatsby build”

dr3007 on Nov 7, 2020

I’ve updated the PR https://github.com/gatsbyjs/gatsby/pull/27991 to make the switch to sass (as it’s the default now anyways: https://webpack.js.org/loaders/sass-loader/#options)

Once we merge that and release the next major you can use node-sass@^5.0.0.

LekoArts on Dec 9, 2020

You can install gatsby-plugin-sass@next now to use the new functionality. The stable 3.0.0 release will go out on Jan 5, 2021.

LekoArts on Dec 16, 2020

This just got merged in webpack-contrib/sass-loader/pull/899

Edit: And it looks like it’s released in v10.0.5

andrew-chang-dewitt on Nov 2, 2020

Thanks for that! I released a new version at gatsby-plugin-sass@3.0.0-next.2 – please try it out 😃

LekoArts on Dec 18, 2020