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

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"

Solution 1:^[1]

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

Two ways to solve this issue:

Install sass npm package:
```
npm -g i sass
```

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

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

Solution 2:^[2]

ReactJS uses node-sass, run the below command.

npm install node-sass --save

Solution 3:^[3]

I had the same issue some times back but I did this and it worked

npm cache clear --force
npm install sass

This should work for you I hope

Solution 4:^[4]

I had the same issue some times back but I did this and it worked npm install sass

Solution 5:^[5]

I tried all the answers above but kept seeing this when I ran ./bin/dev:

yarn run v1.22.17
$ esbuild app/javascript/*.* --bundle --sourcemap --outdir=app/assets/builds --watch
$ sass ./app/assets/stylesheets/application.bootstrap.scss ./app/assets/builds/application.css --no-source-map --load-path=node_modules --watch
node:internal/modules/cjs/loader:936
  throw err;
  ^

Error: Cannot find module './sass.dart.js'

So I tried yarn add sass and it worked. Disclaimer: I don't fully understand npm and yarn, so I'm not quite sure why it worked, just that it did.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1
Solution 2	Googlian
Solution 3	Wesley-Sinde
Solution 4	Md Asif Hossain
Solution 5	stevec

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

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]