Module Build failing when running npm run dev with sass-loader

245 Views Asked by At

I'm currently working on a large project and I have to run it in web. I have Composer 2.5.1, Node v10.2, PHP 7.2, Vue 2.5 and Laravel 5.5. I'm using this old versions because is an old project and I have to change somethings. I've ran the npm install and everything went okay, but everytime I try to run the command npm run dev I got this Error:

ModuleBuildError: Module build failed: ValidationError

I've searched a little and I found the resolution, that is low the sass-loader version to 7, but when I do that, I got this error:

Module build failed: TypeError

And I've looked for a resolution as well, that is up the sass-loader version to 10.But when I do that, I receive the error:

ModuleBuildError: Module build failed: ValidationError

Also, I tried to upgrade the laravel-mix version and it's now at 1.7.2 but I still got the same error message.

This is how my package.json is looking like:

{
    "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": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "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": {
        "axios": "^0.17",
        "bootstrap-sass": "^3.3.7",
        "cross-env": "^5.1",
        "css-loader": "^6.7.3",
        "jquery": "^3.2",
        "laravel-mix": "^1.0",
        "lodash": "^4.17.4",
        "sass-loader": "^10.4.1",
        "vue": "^2.5.7"
    },
    "dependencies": {
        "vue-loader": "^17.0.1"
    }
}

The full message error:

Module build failed: ModuleBuildError: Module build failed: 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?, additionalData?, sourceMap?, webpackImporter? }
    at validate (C:\xampp\htdocs\sms-medsus\medSus\node_modules\sass-loader\node_modules\schema-utils\dist\validate.js:105:11)
    at Object.loader (C:\xampp\htdocs\sms-medsus\medSus\node_modules\sass-loader\dist\index.js:30:29)
    at runLoaders (C:\xampp\htdocs\sms-medsus\medSus\node_modules\webpack\lib\NormalModule.js:195:19)
    at C:\xampp\htdocs\sms-medsus\medSus\node_modules\loader-runner\lib\LoaderRunner.js:367:11
    at C:\xampp\htdocs\sms-medsus\medSus\node_modules\loader-runner\lib\LoaderRunner.js:233:18
    at process._tickCallback (internal/process/next_tick.js:68:7)
 @ ./resources/assets/sass/app.scss
 @ multi ./resources/assets/js/app.js ./resources/assets/sass/app.scss

ERROR in ./resources/assets/js/components/ExampleComponent.vue
Module build failed: TypeError: Cannot read property 'styles' of undefined
    at Object.loader (C:\xampp\htdocs\sms-medsus\medSus\node_modules\vue-loader\dist\index.js:71:34)
 @ ./resources/assets/js/app.js 18:35-79
 @ multi ./resources/assets/js/app.js ./resources/assets/sass/app.scss ```

Honestly I really don't know what to do and I would be really happy if someone could help me with this!
0

There are 0 best solutions below