Gatsby: node-sass breaking on Ubuntu 20

[iAziz786]

Description

I shifted my development from macOS to Ubuntu 20 which removes python2 from their system which makes sense since it's discontinued. The gatsby-plugin-sass rely on [email protected] which internally relies on [email protected]. The screenshot below might help to clear the dependency.

I alias the python command to python3, now the issue is during yarn install step node-gyp is building the project which runs a python2 command and due to which project is unable to build.

The issue will be fixed if we use [email protected] since it rely on [email protected] which supports python3.

Steps to reproduce

If you are on Ubuntu 20 run yarn install on your gatsby project and you will get the error.

Expected result

I expect the node-sass build to be successful.

Actual result

error /home/aziz/Documents/github.com/iAziz786/iAziz786.com/node_modules/node-sass: Command failed.
Exit code: 1
Command: node scripts/build.js
Arguments: 
Directory: /home/aziz/Documents/github.com/iAziz786/iAziz786.com/node_modules/node-sass
Output:
Building: /usr/bin/node /home/aziz/Documents/github.com/iAziz786/iAziz786.com/node_modules/node-gyp/bin/node-gyp.js rebuild --verbose --libsass_ext= --libsass_cflags= --libsass_ldflags= --libsass_library=
gyp info it worked if it ends with ok
gyp verb cli [
gyp verb cli   '/usr/bin/node',
gyp verb cli   '/home/aziz/Documents/github.com/iAziz786/iAziz786.com/node_modules/node-gyp/bin/node-gyp.js',
gyp verb cli   'rebuild',
gyp verb cli   '--verbose',
gyp verb cli   '--libsass_ext=',
gyp verb cli   '--libsass_cflags=',
gyp verb cli   '--libsass_ldflags=',
gyp verb cli   '--libsass_library='
gyp verb cli ]
gyp info using [email protected]
gyp info using [email protected] | linux | x64
gyp verb command rebuild []
gyp verb command clean []
gyp verb clean removing "build" directory
gyp verb command configure []
gyp verb check python checking for Python executable "/usr/bin/python3" in the PATH
gyp verb `which` succeeded /usr/bin/python3 /usr/bin/python3
gyp ERR! configure error 
gyp ERR! stack Error: Command failed: /usr/bin/python3 -c import sys; print "%s.%s.%s" % sys.version_info[:3];
gyp ERR! stack   File "<string>", line 1
gyp ERR! stack     import sys; print "%s.%s.%s" % sys.version_info[:3];
gyp ERR! stack                       ^
gyp ERR! stack SyntaxError: invalid syntax
gyp ERR! stack 
gyp ERR! stack     at ChildProcess.exithandler (node:child_process:309:12)
gyp ERR! stack     at ChildProcess.emit (node:events:327:20)
gyp ERR! stack     at maybeClose (node:internal/child_process:1048:16)
gyp ERR! stack     at Process.ChildProcess._handle.onexit (node:internal/child_process:288:5)
gyp ERR! System Linux 5.4.0-52-generic
gyp ERR! command "/usr/bin/node" "/home/aziz/Documents/github.com/iAziz786/iAziz786.com/node_modules/node-gyp/bin/node-gyp.js" "rebuild" "--verbose" "--libsass_ext=" "--libsass_cflags=" "--libsass_ldflags=" "--libsass_library="
gyp ERR! cwd /home/aziz/Documents/github.com/iAziz786/iAziz786.com/node_modules/node-sass
gyp ERR! node -v v15.0.1

Environment

  System:
    OS: Linux 5.4 Ubuntu 20.04.1 LTS (Focal Fossa)
    CPU: (4) x64 Intel(R) Core(TM) i3-2120 CPU @ 3.30GHz
    Shell: 5.8 - /usr/bin/zsh
  Binaries:
    Node: 15.0.1 - /usr/bin/node
    Yarn: 1.22.5 - /usr/bin/yarn
    npm: 7.0.3 - /usr/bin/npm
  Languages:
    Python: 3.8.5 - /usr/bin/python
  Browsers:
    Chrome: 86.0.4240.111
    Firefox: 82.0
  npmPackages:
    gatsby: ^2.24.23 => 2.24.23 
    gatsby-image: ^2.4.14 => 2.4.14 
    gatsby-plugin-google-analytics: ^2.3.13 => 2.3.13 
    gatsby-plugin-manifest: ^2.4.21 => 2.4.21 
    gatsby-plugin-mdx: ^1.2.30 => 1.2.30 
    gatsby-plugin-offline: ^3.2.21 => 3.2.21 
    gatsby-plugin-postcss: ^2.3.11 => 2.3.11 
    gatsby-plugin-react-helmet: ^3.3.10 => 3.3.10 
    gatsby-plugin-robots-txt: ^1.5.1 => 1.5.1 
    gatsby-plugin-sass: ^2.3.12 => 2.3.12 
    gatsby-plugin-sharp: ^2.6.24 => 2.6.24 
    gatsby-plugin-sitemap: ^2.4.11 => 2.4.11 
    gatsby-plugin-typography: ^2.5.10 => 2.5.10 
    gatsby-remark-copy-linked-files: ^2.3.12 => 2.3.12 
    gatsby-remark-images: ^3.3.23 => 3.3.23 
    gatsby-remark-prismjs: ^3.5.10 => 3.5.10 
    gatsby-remark-reading-time: ^1.1.0 => 1.1.0 
    gatsby-remark-responsive-iframe: ^2.4.12 => 2.4.12 
    gatsby-remark-smartypants: ^2.3.10 => 2.3.10 
    gatsby-source-filesystem: ^2.3.23 => 2.3.23 
    gatsby-transformer-remark: ^2.8.27 => 2.8.27 
    gatsby-transformer-sharp: ^2.5.12 => 2.5.12 

[kalwalt]

Hi @iAziz786 i had the same issue, same error, at the end yarn was able to build node-sass dependencies but running gatsby-develop i got now this error:

error Generating development JavaScript bundle failed

Node Sass version 5.0.0 is incompatible with ^4.0.0.
failed Building development bundle - 56.481s

A criptyc messssage, maybe is referring to some old package dependencies? Webpack or react?

My packages:

"gatsby": "^2.24.91",
"gatsby-cli": "^2.12.113",
"gatsby-plugin-sass": "^2.3.22",
"node-sass": "^5.0.0",

Node: v14.14.0
npm: 6.14.8
Python 2 and 3 installed.

[kalwalt]

I solved installing on my project:

// package.json
"gatsby-plugin-sass": "^2.3.22", 
"node-sass": "^4.9.0",

[iAziz786]

@kalwalt In my case upgrading to [email protected] has fixed the issue.

I'm not sure whether the peerDependencies of gatsby-plugin-sass should be upgraded to [email protected] or not. I'll ask on the discord for the answer.

[kalwalt]

Good to know, I used these settings in my local machine, but my website is hosted on Netlify, the server run on Ubuntu 16.04, not sure that will work, i will try... 🤞

[iAziz786]

Okay, to check whether it works out of the box or not I removed the alias I created for the python command to python3. Since by default, it won't be there on Ubuntu 20 and...

It worked! :tada:

Looks like the version 5 of node-sass can handle the absence of python command.

[LekoArts]

I'll close this as a duplicate of https://github.com/gatsbyjs/gatsby/issues/27754