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:
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
.
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.
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.
node-gyp
to the dev dependencies.Added to package.json
"node-gyp": "^9.4.0",
No help.
node-sass
to the dev deps.Added to the package.json
"node-sass": "^6.0.1"
No help.
node-sass
.My guesses:
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.
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 :)
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",
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 --
node-sass
isn't in package.json
, and sass
is in it.node_module/
and package.lock.json
npm install
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
.