I have an error with npm when install in Laravel 6 it's now working I don't know despite of i did all the steps in order
this are my versions:
Laravel version 6
npm 6.13.7
Node 13.5.0
I did the commends in order
composer require laravel/ui --dev
php artisan ui vue --auth
npm install
npm run dev
but when do npm run dev it's error show
ERROR in ./resources/sass/app.scss Module build failed (from ./node_modules/css-loader/index.js): ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js): ValidationError: Invalid options object. Sass Loader has been initialized using an options object that does not match the API schema. - options has an unknown property 'outputStyle'. These properties are valid: object { implementation?, sassOptions?, prependData?, sourceMap?, webpackImporter? } at validate (D:\project\laravel\node_modules\sass-loader\node_modules\schema-utils\dist\validate.js:85:11) at Object.loader (D:\project\laravel\node_modules\sass-loader\dist\index.js:36:28) at D:\project\laravel\node_modules\webpack\lib\NormalModule.js:316:20 at D:\project\laravel\node_modules\loader-runner\lib\LoaderRunner.js:367:11 at D:\project\laravel\node_modules\loader-runner\lib\LoaderRunner.js:233:18 at runSyncOrAsync (D:\project\laravel\node_modules\loader-runner\lib\LoaderRunner.js:143:3) at iterateNormalLoaders (D:\project\laravel\node_modules\loader-runner\lib\LoaderRunner.js:232:2) at D:\project\laravel\node_modules\loader-runner\lib\LoaderRunner.js:205:4 at D:\project\laravel\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:85:15 at processTicksAndRejections (internal/process/task_queues.js:79:11) @ ./resources/sass/app.scss
ERROR in ./resources/sass/app.scss (./node_modules/css-loader??ref--5-2!./node_modules/postcss-loader/src??postcss0!./node_modules/resolve-url-loader??ref--5-4!./node_modules/sass-loader/dist/cjs.js??ref--5-5!./resources/sass/app.scss) Module build failed (from ./node_modules/sass-loader/dist/cjs.js): ValidationError: Invalid options object. Sass Loader has been initialized using an options object that does not match the API schema. - options has an unknown property 'outputStyle'. These properties are valid: object { implementation?, sassOptions?, prependData?, sourceMap?, webpackImporter? } at validate (D:\project\laravel\node_modules\sass-loader\node_modules\schema-utils\dist\validate.js:85:11) at Object.loader (D:\project\laravel\node_modules\sass-loader\dist\index.js:36:28) @ ./resources/sass/app.scss 2:14-253 npm ERR! code ELIFECYCLE npm ERR! errno 2 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 2 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.npm ERR! A complete log of this run can be found in: npm ERR!
C:\Users\Ahmed\AppData\Roaming\npm-cache_logs\2020-02-22T21_12_44_218Z-debug.log npm ERR! code ELIFECYCLE npm ERR! errno 2 npm ERR! @ dev:npm run development
npm ERR! Exit status 2 npm ERR! npm ERR! Failed at the @ dev script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above.npm ERR! A complete log of this run can be found in: npm ERR!
C:\Users\Ahmed\AppData\Roaming\npm-cache_logs\2020-02-22T21_12_44_441Z-debug.log
and this 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",
"start": "webpack-dev-server --hot"
},
"devDependencies": {
"axios": "^0.19",
"bootstrap": "^4.0.0",
"bootstrap-sass": "^3.3.7",
"jquery": "^3.2",
"laravel-mix": "^4.0.7",
"lodash": "^4.17.13",
"popper.js": "^1.12",
"resolve-url-loader": "^2.3.1",
"sass": "^1.20.1",
"sass-loader": "^8.0.0",
"vue": "^2.5.17",
"vue-template-compiler": "^2.6.10"
},
"dependencies": {
"node-sass": "^4.13.1",
"webpack": "^4.41.6"
}
}
Thanks
In Laravel's case, the npm run dev command is an alias for the npm run development command. The development command is used to run the mix module, which is used to compile the JavaScript and CSS files written for the Laravel application.
You can download it from https://nodejs.org/en/ and install it. Then you will be able to run those commands from the terminal, and maybe from xampp shell (I've never used xampp so I can not guarantee).
Had same error, solved by reinstalling sass-loader
v7.1
npm uninstall --save-dev sass-loader
npm install --save-dev [email protected]
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