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-gypI'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.jsonnpm installAnd 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.