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!