9

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

2
  • 5
    You can try downgrading sass-loader versiion to 7.1.0 npm uninstall --save-dev sass-loader npm install --save-dev [email protected] Commented Feb 23, 2020 at 5:02
  • thankyou it's working good after downgrading sass-loader versiion to 7.1.0 Commented Feb 23, 2020 at 18:32

1 Answer 1

30

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

npm uninstall --save-dev sass-loader
npm install --save-dev [email protected]
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.