After spending a significant amount of time working on a Vue/Vuetify project, everything seemed to be functioning perfectly until yesterday. The trouble began when I encountered issues with utilizing the <v-simple-table> Vuetify component. In an attempt to resolve this, I decided to run npm install and re-install Vuetify, but that decision turned out to be quite detrimental.
The current challenge I am facing is that whenever I run npm run serve, I encounter the following error repeatedly:
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
ValidationError: Invalid options object. Sass Loader has been initialised using an options object that does not match the API schema.
- options has an unknown property 'indentedSyntax'. These properties are valid:
object { implementation?, sassOptions?, prependData?, sourceMap?, webpackImporter? }
at validate (C:\Users\Jeroen\Documents\favourite_xi\node_modules\sass-loader\node_modules\schema-utils\dist\validate.js:49:11)
at Object.loader (C:\Users\Jeroen\Documents\favourite_xi\node_modules\sass-loader\dist\index.js:36:28)
@ ./node_modules/vuetify/src/components/VCalendar/mixins/calendar-with-events.sass 4:14-225 14:3-18:5 15:22-233
@ ./node_modules/vuetify/lib/components/VCalendar/mixins/calendar-with-events.js
@ ./node_modules/vuetify/lib/components/VCalendar/VCalendar.js
@ ./node_modules/vuetify/lib/components/VCalendar/index.js
@ ./node_modules/vuetify/lib/components/index.js
@ ./node_modules/vuetify/lib/index.js
@ ./src/main.js
@ multi (webpack)-dev-server/client?http://192.168.178.115:8080/sockjs-node ./node_modules/@vue/cli-service/node_modules/webpack/hot/dev-server.js ./src/main.js
This is my main.js file:
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import Vuetify from 'vuetify/lib'
import 'vuetify/dist/vuetify.min.css'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
Vue.use(BootstrapVue)
Vue.use(Vuetify, {
theme: {
"primary": "#FFCA28",
"secondary": "#1976D2",
"accent": "#82B1FF",
"error": "#FF5252",
"info": "#2196F3",
"success": "#4CAF50",
"warning": "#FB8C00"
}
})
Vue.config.productionTip = false
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
I've attempted various solutions recommended by other users such as running npm rebuild node-sass in both regular and admin mode, deleting the node-modules folder, and reinstalling sass-loader. However, none of these fixes have resolved the issue so far.
Could there possibly be a fault in my main.js file?
Your assistance would be greatly appreciated! Please let me know if you require additional code snippets or information.
Edit: included package.json for reference
{
"name": "favourite_xi",
"version": "0.1.0",
"private": true,
// Remaining content of the package.json file...
}