Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How can I fix error npm run dev in laravel 6

Tags:

npm

laravel

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

like image 904
Don't worry Avatar asked Feb 22 '20 21:02

Don't worry


People also ask

What does npm run dev do in laravel?

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.

How install npm install and npm run Dev?

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).


1 Answers

Had same error, solved by reinstalling sass-loader v7.1

npm uninstall --save-dev sass-loader
npm install --save-dev [email protected]
like image 174
Sheikhah Maasher Avatar answered Jan 29 '23 12:01

Sheikhah Maasher