node-gyp node-sass problem with using `npm install`

Question

I have a problem related to node-gyp, node-sass. I've just updated the npm from 6 to 8.19.4. Everything used to work against the 6th version. However, now - after moving to npm@8 - I see the error during npm install process.

I face the error below:

npm ERR! npm ERR! gyp ERR! stack Error: Can't find Python executable "python", you can set the PYTHON env variable.

npm ERR! npm ERR! gyp ERR! node -v v16.20.2
npm ERR! npm ERR! gyp ERR! node-gyp -v v3.8.0

I know it requires python2.7, though, I don't think it'd be a good solution to install one. Because it's deprecated. So is node-sass.

Globally, I have v9.4.0 of node-gyp installed.

My tryouts that haven't helped:

1. Uninstall node-sass.

I don't have any direct dependency on node-sass in package.json, so it must be indirect. Regardless of that fact, I've tried to uninstall node-sass and use sass:

npm uninstall node-sass
npm install sass

I end up seeing the same error related to python.

2. Set the npm config

npm install --global node-gyp@latest
npm config set node_gyp $(npm prefix -g)/lib/node_modules/node-gyp/bin/node-gyp.js

The script above hasn't helped me either.

When I check the config

npm config get node_gyp

I see

/usr/local/lib/node_modules/node-gyp/bin/node-gyp.js

which means the variable is set, but it doesn't help anyway.

3. Update local node-gyp

I've also tried to update node-gyp which is a local copy of npm by

npm explore npm/node_modules/@npmcli/run-script -g -- npm_config_global=false npm install node-gyp@latest

No help.

4. Add node-gyp to the dev dependencies.

Added to package.json

"node-gyp": "^9.4.0",

No help.

5. Add node-sass to the dev deps.

Added to the package.json

"node-sass": "^6.0.1"

No help.

6. Check the tree dependencies. I've used an app to build the dependency tree. This thing hasn't helped either - I haven't found any library using node-sass.

My guesses:

1. I reckon that there is some indirect dependency that requires the old node-sass => it requires the old node-gyp => it requires the old python2.7. The update of the version of the first dependency should help. Though, I don't know which one eaxctly. The package.json is presented below.

2. Adding python2 should resolve the issue as well, but I don't want to introduce anything new being deprecated into the app.

Package.json dependencies:

"devDependencies": {
    "@babel/core": "^7.22.5",
    "@babel/eslint-parser": "^7.22.5",
    "@babel/plugin-proposal-class-properties": "^7.18.6",
    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.18.6",
    "@babel/plugin-proposal-object-rest-spread": "^7.20.7",
    "@babel/plugin-proposal-optional-chaining": "^7.21.0",
    "@babel/plugin-transform-runtime": "^7.22.5",
    "@babel/polyfill": "^7.12.1",
    "@babel/preset-env": "^7.22.5",
    "@babel/preset-react": "^7.22.5",
    "@babel/preset-typescript": "^7.22.5",
    "@babel/register": "^7.22.5",
    "@playwright/test": "^1.29.1",
    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.10",
    "@storybook/addon-actions": "^7.2.0",
    "@storybook/addon-essentials": "^7.2.0",
    "@storybook/addon-interactions": "^7.2.0",
    "@storybook/addon-links": "^7.2.0",
    "@storybook/cli": "^7.2.0",
    "@storybook/preset-scss": "^1.0.3",
    "@storybook/react-webpack5": "^7.2.0",
    "@storybook/testing-library": "^0.2.0",
    "@svgr/webpack": "^5.5.0",
    "@types/jest": "^29.2.1",
    "@types/lodash": "^4.14.187",
    "@types/node": "^18.11.9",
    "@types/progress-bar-webpack-plugin": "^2.1.2",
    "@types/randomstring": "^1.1.5",
    "@types/rc-slider": "^8.6.6",
    "@types/react": "^16.13.1",
    "@types/react-dom": "^18.0.8",
    "@types/react-router-dom": "^5.3.3",
    "@types/speed-measure-webpack-plugin": "^1.3.4",
    "@types/uuid": "^9.0.1",
    "@typescript-eslint/eslint-plugin": "^5.62.0",
    "@typescript-eslint/parser": "^5.62.0",
    "babel-loader": "^9.1.2",
    "babel-plugin-module-resolver": "^5.0.0",
    "cross-env": "^7.0.2",
    "crypto-browserify": "^3.12.0",
    "css-loader": "^6.8.1",
    "dependency-cruiser": "^11.18.0",
    "envify": "^4.1.0",
    "esbuild-loader": "^3.0.1",
    "eslint": "^8.45.0",
    "eslint-config-airbnb": "^19.0.4",
    "eslint-config-airbnb-typescript": "^17.1.0",
    "eslint-config-prettier": "^8.8.0",
    "eslint-import-resolver-alias": "^1.1.2",
    "eslint-plugin-import": "^2.27.5",
    "eslint-plugin-jest": "^27.2.3",
    "eslint-plugin-jsx-a11y": "^6.7.1",
    "eslint-plugin-prettier": "^3.3.1",
    "eslint-plugin-react": "^7.33.0",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-webpack-plugin": "^4.0.1",
    "file-loader": "^6.2.0",
    "fs-extra": "^8.1.0",
    "git-revision-webpack-plugin": "^5.0.0",
    "html-loader": "^4.2.0",
    "html-webpack-plugin": "^5.5.3",
    "husky": "^6.0.0",
    "ify-loader": "^1.1.0",
    "jest": "^29.3.1",
    "jest-css-modules": "^2.1.0",
    "jest-environment-jsdom": "^29.3.1",
    "jest-fetch-mock": "^3.0.3",
    "jest-raw-loader": "^1.0.1",
    "jest-svg-transformer": "^1.0.0",
    "mini-css-extract-plugin": "^2.7.6",
    "progress-bar-webpack-plugin": "^2.1.0",
    "raw-loader": "^4.0.2",
    "react-docgen-typescript-plugin": "^1.0.5",
    "react-refresh": "^0.14.0",
    "regenerator-runtime": "^0.13.11",
    "sass": "^1.66.1",
    "sass-loader": "^13.3.2",
    "speed-measure-webpack-plugin": "^1.5.0",
    "storybook": "^7.2.0",
    "storybook-css-modules": "^1.0.8",
    "stream-browserify": "^3.0.0",
    "style-loader": "^3.3.3",
    "template-ejs-loader": "0.9.4",
    "terser-webpack-plugin": "^5.3.9",
    "ts-loader": "^8.4.0",
    "typescript": "^5.1.3",
    "url-loader": "^4.1.1",
    "webpack": "^5.88.1",
    "webpack-cli": "^5.1.4",
    "webpack-dev-server": "^4.15.1",
    "webpack-shell-plugin": "^0.5.0",
    "webpack-shell-plugin-next": "^2.3.1",
    "worker-loader": "^3.0.8"
  }

  "dependencies": {
    "@devexpress/dx-react-core": "^2.7.5",
    "@devexpress/dx-react-grid": "^2.7.5",
    "@devexpress/dx-react-grid-export": "^2.7.5",
    "@devexpress/dx-react-grid-material-ui": "^2.7.5",
    "@dnd-kit/core": "^6.0.5",
    "@dnd-kit/sortable": "^7.0.1",
    "@dnd-kit/utilities": "^3.2.0",
    "@material-ui/core": "^4.9.5",
    "@material-ui/icons": "^4.9.1",
    "@material-ui/lab": "^4.0.0-alpha.47",
    "@material-ui/styles": "^4.9.0",
    "@sentry/browser": "^6.19.6",
    "@sentry/webpack-plugin": "^2.4.0",
    "@storybook/react": "^7.2.0",
    "@stripe/react-stripe-js": "^1.9.0",
    "@stripe/stripe-js": "^1.32.0",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^12.1.5",
    "@types/color-convert": "^2.0.0",
    "ag-grid-community": "^28.2.0",
    "ag-grid-react": "^28.2.0",
    "ansi-to-react": "^5.0.0",
    "assert": "^2.0.0",
    "axios": "^1.4.0",
    "classnames": "^2.2.6",
    "clipboard": "^2.0.4",
    "codemirror": "^5.48.0",
    "color": "^4.2.3",
    "color-string": "^1.6.0",
    "comlink": "^4.3.1",
    "connected-react-router": "^6.3.2",
    "console-browserify": "^1.2.0",
    "csslint": "^1.0.5",
    "currency.js": "^1.1.4",
    "dagre": "^0.8.5",
    "date-fns": "^2.24.0",
    "diff": "^4.0.1",
    "diff2html": "^3.1.18",
    "draft-js": "^0.10.5",
    "fast-deep-equal": "^2.0.1",
    "file-saver": "^1.3.8",
    "filesize": "^3.6.1",
    "github-markdown-css": "^4.0.0",
    "hast-util-sanitize": "^3.0.0",
    "history": "^4.10.1",
    "htmlhint": "^1.1.4",
    "http-server": "^14.1.1",
    "intersection-observer": "^0.7.0",
    "invert-color": "^2.0.0",
    "jquery": "^3.3.1",
    "jshint": "^2.13.6",
    "jsoneditor": "^9.5.6",
    "jszip": "^3.7.0",
    "katex": "^0.12.0",
    "keymirror": "^0.1.1",
    "lodash": "^4.17.21",
    "lottie-react": "^2.4.0",
    "luxon": "^1.3.2",
    "material-ui-search-bar": "^1.0.0-beta.13",
    "mathjs": "^7.6.0",
    "md5": "^2.3.0",
    "moment": "^2.29.4",
    "npm": "^6.14.18",
    "p-limit": "^2.1.0",
    "papaparse": "^5.3.2",
    "plotly.js": "2.11.1",
    "prettier": "2.2.1",
    "process": "^0.11.10",
    "prop-types": "^15.7.2",
    "query-string": "^6.12.1",
    "randomstring": "^1.3.0",
    "rc-slider": "^8.6.6",
    "rc-tooltip": "^3.7.3",
    "re-resizable": "^5.0.1",
    "react": "^16.13.1",
    "react-codemirror2": "^6.0.0",
    "react-color": "^2.17.3",
    "react-complex-tree": "^2.2.2",
    "react-contenteditable": "^3.2.6",
    "react-copy-to-clipboard": "^5.0.1",
    "react-datepicker": "^4.2.1",
    "react-document-title": "^2.0.3",
    "react-dom": "^16.13.1",
    "react-draggable": "^4.1.0",
    "react-dropzone": "^4.2.13",
    "react-easy-crop": "^4.0.1",
    "react-flow-renderer": "^10.0.6",
    "react-grid-layout": "^1.2.5",
    "react-helmet": "^6.1.0",
    "react-highlight": "0.11.1",
    "react-hubspot-form": "^1.3.7",
    "react-image-crop": "^8.5.0",
    "react-intercom": "^1.0.14",
    "react-intersection-observer": "^8.24.1",
    "react-loaders": "^3.0.1",
    "react-mde": "git+https://github.com/comet-ml/react-mde.git",
    "react-papaparse": "^3.11.1",
    "react-placeholder": "^3.0.1",
    "react-player": "^2.9.0",
    "react-plotly.js": "2.5.1",
    "react-prismazoom": "^3.1.0",
    "react-query": "^3.34.8",
    "react-redux": "^7.2.0",
    "react-router": "^5.2.0",
    "react-router-dom": "^5.2.0",
    "react-router-hash-link": "^1.2.0",
    "react-select": "^4.3.1",
    "react-sortable-hoc": "^2.0.0",
    "react-spring": "9.4.5",
    "react-sticky": "^6.0.3",
    "react-svg-loader": "^3.0.3",
    "react-syntax-highlighter": "^7.0.4",
    "react-tiny-virtual-list": "^2.2.0",
    "react-virtualized": "^9.22.3",
    "react-window": "^1.8.7",
    "redux": "^4.0.1",
    "redux-devtools-extension": "^2.13.2",
    "redux-form": "^8.1.0",
    "redux-thunk": "^2.2.0",
    "rehype-highlight": "^4.0.0",
    "rehype-katex": "^4.0.0",
    "rehype-parse": "^7.0.1",
    "rehype-sanitize": "^4.0.0",
    "rehype-stringify": "^8.0.0",
    "remark": "^12.0.1",
    "remark-math": "^3.0.1",
    "remark-parse": "^8.0.3",
    "remark-rehype": "^7.0.0",
    "reselect": "^4.0.0",
    "resize-observer-polyfill": "^1.5.1",
    "semver": "^7.3.8",
    "showdown": "^1.9.1",
    "turndown": "^4.0.2",
    "unified": "^9.2.0",
    "use-deep-compare-effect": "^1.6.1",
    "use-route-as-state": "^5.1.1",
    "validator": "^13.7.0",
    "wavesurfer.js": "^4.1.1"
  }

Context:

Everything works smoothly on npm@6.

The versions:

node-gyp: 9.4.0
node: 16.20.2
npm: 8.19.4

Thanks :)

Answer 1

Update

Found the root cause -- one of your installed module is dependent on node-sass, therefore you will run into the same issue regardless you removed node-sass in your package.json or not.

"react-mde": "git+https://github.com/comet-ml/react-mde.git",

---

Original

Like what you have encountered, due to the fact node-sass requires node-gyp which is notoriously difficult to get it working. Despite there are workaround, the general suggestion for this kinda problem is to, like you said already, to remove node-sass and just use sass.

Assuming we are using sass I suspect that your node_module directory and package.lock.json is outdated (perhaps you modified package.json manually somehow instead of running npm install/uninstall?).

Therefore, the easiest way to get past this work is replacing node-sass with sass with the following steps --

1. Make sure node-sass isn't in package.json, and sass is in it.
2. Remove node_module/ and package.lock.json
3. run npm install
4. re-run the app.

And this should get you back on your feet.

If that doesn't work it prob means some other module you have installed in the app is also dependent on node-gyp.