Menu
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
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" 
669
To Solve Cannot find module 'sass' in reactjs Error You just need to globally install sass module with this plugin. First of all you need to forcefully clear your cache with this plugin: npm cache clear –force Now, You have to install sass module with this command: npm install sass Now, your error must be solved.
If you don't see the gulp-sass package in your node_modules folder, or are still having issues, you can try reinstalling the package. First, open your package. json and package-lock. json files and remove any references to gulp-sass and node-sass that you see.
You can install Sass globally using npm install -g sass which will provide access to the sass executable. You can also add it to your project using npm install --save-dev sass . This provides the executable as well as a library: const sass = require('sass'); const result = sass.
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') }); If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
