npm run cannot find module 'sass' after repeated reinstall attempts

Question

Any call to npm run produces this error:

$ npm run dev  > @ dev /project > npm run development   > @ development /project > cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js  /project/node_modules/webpack-cli/bin/cli.js:235                 throw err;                 ^  Error: Cannot find module 'sass'     at Function.Module._resolveFilename (internal/modules/cjs/loader.js:603:15)     at Function.Module._load (internal/modules/cjs/loader.js:529:25)     at Module.require (internal/modules/cjs/loader.js:657:17)     at require (/project/node_modules/v8-compile-cache/v8-compile-cache.js:159:20)     at implementation (/project/node_modules/laravel-mix/src/components/Sass.js:52:39)     at implementation (/project/node_modules/laravel-mix/src/components/Preprocessor.js:125:61)     at global.tap (/project/node_modules/laravel-mix/src/helpers.js:10:5)     at Sass.loaderOptions (/project/node_modules/laravel-mix/src/components/Preprocessor.js:123:9)     at extractPlugin (/project/node_modules/laravel-mix/src/components/Preprocessor.js:87:39)     at global.tap (/project/node_modules/laravel-mix/src/helpers.js:10:5)     at details.forEach.preprocessor (/project/node_modules/laravel-mix/src/components/Preprocessor.js:27:13)     at Array.forEach (<anonymous>)     at Sass.webpackRules (/project/node_modules/laravel-mix/src/components/Preprocessor.js:22:22)     at ComponentFactory.applyRules (/project/node_modules/laravel-mix/src/components/ComponentFactory.js:155:23)     at Mix.listen.rules (/project/node_modules/laravel-mix/src/components/ComponentFactory.js:66:48)     at events.(anonymous function).forEach.handler (/project/node_modules/laravel-mix/src/Dispatcher.js:34:47)     at Array.forEach (<anonymous>)     at Dispatcher.fire (/project/node_modules/laravel-mix/src/Dispatcher.js:34:28)     at Mix.dispatch (/project/node_modules/laravel-mix/src/Mix.js:119:25)     at WebpackConfig.buildRules (/project/node_modules/laravel-mix/src/builder/WebpackConfig.js:83:13)     at WebpackConfig.build (/project/node_modules/laravel-mix/src/builder/WebpackConfig.js:23:14)     at Object.<anonymous> (/project/node_modules/laravel-mix/setup/webpack.config.js:29:38)     at Module._compile (/project/node_modules/v8-compile-cache/v8-compile-cache.js:178:30)     at Object.Module._extensions..js (internal/modules/cjs/loader.js:732:10)     at Module.load (internal/modules/cjs/loader.js:620:32)     at tryModuleLoad (internal/modules/cjs/loader.js:560:12)     at Function.Module._load (internal/modules/cjs/loader.js:552:3)     at Module.require (internal/modules/cjs/loader.js:657:17)     at require (/project/node_modules/v8-compile-cache/v8-compile-cache.js:159:20)     at WEBPACK_OPTIONS (/project/node_modules/webpack-cli/bin/convert-argv.js:113:13)     at requireConfig (/project/node_modules/webpack-cli/bin/convert-argv.js:115:6)     at /project/node_modules/webpack-cli/bin/convert-argv.js:122:17     at Array.forEach (<anonymous>)     at module.exports (/project/node_modules/webpack-cli/bin/convert-argv.js:120:15)     at yargs.parse (/project/node_modules/webpack-cli/bin/cli.js:232:39)     at Object.parse (/project/node_modules/yargs/yargs.js:567:18) npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! @ development: `cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js` npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the @ development script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above. 

Here is my package.json:

{ "private": true,   "scripts": {     "dev": "npm run development",     "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",     "watch": "npm run development -- --watch",     "watch-poll": "npm run watch -- --watch-poll",     "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",     "prod": "npm run production",     "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"   },   "devDependencies": {     "accounting": "^0.4.1",     "axios": "^0.18.0",     "bootstrap": "^4.1.3",     "bootstrap-sass": "^3.4.0",     "cross-env": "^5.2.0",     "css-loader": "^2.1.0",     "fancybox": "^3.0.1",     "jquery": "^3.3.1",     "jquery-slimscroll": "^1.3.8",     "ladda": "^2.0.1",     "laravel-mix": "^4.0.13",     "locutus": "^2.0.10",     "metismenu": "^2.7.9",     "moment": "^2.23.0",     "resolve-url-loader": "2.3.1",     "sass-loader": "7.*",     "style-loader": "^0.23.1",     "vue": "^2.5.21",     "vue-template-compiler": "^2.5.21",     "webpack": "^4.28.3",     "webpack-cli": "^3.2.0"   },   "dependencies": {     "ajv": "^6.6.2",     "bootstrap-vue": "^2.0.0-rc.11",     "bootstrap4c-chosen": "^1.0.13",     "extract-text-webpack-plugin": "^4.0.0-beta.0",     "imagemin": "^6.0.0",     "jsonexport": "^2.4.1",     "laravel-echo": "^1.5.2",     "lodash": "^4.17.11",     "node-sass": "^4.11.0",     "pusher-js": "^4.3.1",     "sweetalert2": "^7.32.4",     "vue-api-query": "^1.2.0",     "vue-events": "^3.1.0",     "vue-multiselect": "^2.1.3",     "vue-sweetalert2": "^1.6.3",     "vuetable-2": "^2.0.0-beta.4",     "vuex": "^3.0.1"   } } 

My webpack.mix.js:

const mix = require('laravel-mix');  mix.js('resources/assets/js/app.js', 'public/js')     .sass('resources/assets/sass/app.scss', 'public/css')     .version()     .sourceMaps(); 

I've tried deleting node_modules and npm install again but that doesn't fix it.

rm -rf node_modules rm package-lock.json yarn.lock npm cache clear --force npm install 

Doing the same process using yarn install instead of npm does not solve it.

Tried installing using this option but no luck: npm install node-sass --no-bin-links

• npm v6.4.1
• node v11.5.0
• yarn v1.12.3

This problem does not happen on older version of Webpack and Mix. For instance, the following packages work but obviously lose some of the newer features:

"laravel-mix": "^3", "webpack": "^3.11.0", "webpack-cli": "^3.1.2" 

Answer 1

Since 4.0.0 laravel-mix switched to using sass instead of node-sass.

Two ways to solve this issue:

1. Install sass npm package:

   npm -g i sass 

2. Configure mix to use node-sass instead (webpack.mix.js):

   mix.sass('resources/assets/sass/app.scss', 'public/css', {   implementation: require('node-sass') });