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"

score 45 · Answer 1 · answered Apr 25 '21 at 10:48

45

ReactJS uses node-sass, run the below command.

npm install node-sass --save

answered Apr 25 '21 at 10:48

Googlian

6,077
3
38
44

5

Saved me a great deal of time. – Joseph King May 27 '21 at 15:34
can you explain why does this work please ? – arrmani88 Nov 08 '22 at 09:46

Styx · Accepted Answer · 2019-05-19T17:53:42.263

42

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')
});

edited May 19 '19 at 17:53

answered Jan 04 '19 at 22:32

Styx

9,863
8
43
53

This solution didn't work for me it throw another error after above steps "your system doesn't support node sass yet ...' – mufaddal_mw May 10 '19 at 09:03
edit : I've to install node-sass as local dependency to make above work. – mufaddal_mw May 10 '19 at 09:13
@mufaddal_mw Yes, it was assumed the `node-sass` is already installed, like stated in the question. – Styx May 10 '19 at 09:42
1

In webpack.mix.js, I changed the code from mix.js('resources/assets/js/app.js', 'public/js').sourceMaps().sass('resources/assets/sass/app.scss', 'public/css'); to mix.js('resources/assets/js/app.js', 'public/js').sourceMaps(); mix.sass('resources/assets/sass/app.scss', 'public/css', { implementation: require('node-sass') }); – Darren Murphy May 19 '19 at 15:43
Why is this not installed when a user runs npm install, isnt that the whole point of npm? to install dependancies? – Brad May 28 '19 at 11:33
@Brad Because `sass` is not a _dependency_ for `laravel-mix`. You could choose to use another SASS implementation after all, right? You could even not use it at all. So, you should install them manually. – Styx May 28 '19 at 12:07
1

for yarn package users --> "yarn add sass" – Gayan Chinthaka Dec 19 '21 at 06:24
Please make sure to restart the npm debug dev server after that. For those that it did not work, it is probably why it did not work. – gil123 Jun 04 '22 at 08:13

score 18 · Answer 3 · answered Jun 25 '21 at 09:08

18

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

answered Jun 25 '21 at 09:08

Wesley-Sinde

177
3
6

new react users-worked for me as well – Darpan Rajput Jul 24 '22 at 07:50

score 4 · Answer 4 · answered Aug 07 '21 at 09:35

4

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

answered Aug 07 '21 at 09:35

Md Asif Hossain

59
1
1

8

This has already been mentioned in the other answers. – Eric Aya Aug 07 '21 at 12:17

score 1 · Answer 5 · answered Aug 24 '22 at 21:49

1

If you installed the module while your server was running, you have just to stop the server and running it again...

answered Aug 24 '22 at 21:49

Omar Zaoujal

397
5
13

score 0 · Answer 6 · answered Apr 28 '22 at 17:00

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.

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

6 Answers6