Node Sass version 5.0.0 is incompatible with ^4.0.0.

[jen-prince]

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(R) Core(TM) 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

[nhevia]

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 webpack-contrib/sass-loader#899

[andrew-chang-dewitt]

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

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

[dr3007]

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"

[kimbaudi]

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')
    },
}

[andrew-chang-dewitt]

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?

[deG3nt3lm4n]

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 :)

[garethbrickman]

My app builds have failed on AWS Amplify because of this issue. I first had to run npm uninstall node-sass and then kimbaudi's solution to fix it.

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')
    },
}

[errorsolve]

Here Is All Possible Solution added Error: Node Sass version 5.0.0 is incompatible with ^4.0.0

[LekoArts]

I've updated the PR #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]

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.

[saadcharif]

@kimbaudi Thank you for this you LEGEND. Changing the node version did not work for me, instead, installing with Dart did! Really appreciate it

[Londeren]

"gatsby": "^2.26.1",
    "gatsby-plugin-sass": "^3.0.0-next.1",
    "node-sass": "^5.0.0",

Doesn't work for me:

ERROR #98123 WEBPACK

undefined failed

Invalid options object. Sass Loader has been initialized using an options object that does not match the API schema.

• options has an unknown property 'sourceMapEmbed'. These properties are valid:
  object { implementation?, sassOptions?, additionalData?, sourceMap?, webpackImporter? }

[LekoArts]

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

[tjozsa]

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

Thanks! Worked perfectly with gatsby-plugin-sass@3.0.0-next.2 for me.

[Abutahir12]

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 :)

Damn it worked! Thanks!

[rburgst]

for anyone banging their head against the wall why none of these fixes above helped, please check your gatsby-config.js and replace

{
      resolve: 'gatsby-plugin-sass',
      options: {
        data: `...`,
      },
    },

with

{
      resolve: 'gatsby-plugin-sass',
      sassOptions: {
        data: `...`,
      },
    },

[LekoArts]

gatsby-plugin-sass@3.0.0 has been released with a fix for this, so the currently most upvoted comment isn't necessary anymore.

You can use both the Node and Dart implementation but please note that the Node version was deprecated.

With v3 there were breaking changes, please see them here:
https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-sass#v300