web-dev-qa-db-fra.com

Obtention du message d'erreur La construction du module a échoué (à partir de ./node_modules/sass-loader/dist/cjs.js) lors de l'exécution de npm serve

Je travaille sur un projet Vue/Vuetify depuis un certain temps maintenant. Tout a bien fonctionné jusqu'à hier. J'ai eu des problèmes avec l'utilisation de <v-simple-table> composant vuetify, j'ai donc décidé d'exécuter npm install et de réinstaller vuetify: mauvaise idée.

Le problème est que j'obtiens l'erreur suivante plusieurs fois lors de l'exécution de npm run serve:

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

Mon fichier main.js:

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

J'ai déjà consulté plusieurs articles et ils conseillent tous d'exécuter npm rebuild node-sass (à la fois régulièrement qu'en mode administrateur), supprimez le dossier node-modules, réinstallez sass-loader, mais rien n'a fonctionné jusqu'à présent.

Y a-t-il quelque chose qui ne va pas dans mon main.js peut-être?

Merci d'avance! Faites-moi savoir si j'ai besoin de publier plus de mon code ou des informations supplémentaires.

Edit: ajouté package.json

{
  "name": "favourite_xi",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "bootstrap": "^4.3.1",
    "bootstrap-vue": "^2.0.0-rc.22",
    "core-js": "^2.6.5",
    "node-sass": "^4.12.0",
    "stylus": "^0.54.7",
    "stylus-loader": "^3.0.2",
    "uuid": "^3.3.3",
    "vue": "^2.6.10",
    "vue-cool-select": "^2.10.2",
    "vue-flip": "^0.3.0",
    "vue-responsive-text": "^0.1.4",
    "vue-router": "^3.0.3",
    "vuetify": "^2.0.16",
    "vuex": "^3.1.1"
  },
  "devDependencies": {
    "@fortawesome/fontawesome-free": "^5.10.1",
    "@vue/cli-plugin-babel": "^3.8.0",
    "@vue/cli-plugin-eslint": "^3.8.0",
    "@vue/cli-service": "^3.8.0",
    "@vue/eslint-config-standard": "^4.0.0",
    "babel-eslint": "^10.0.1",
    "eslint": "^5.16.0",
    "eslint-plugin-vue": "^5.0.0",
    "sass-loader": "^8.0.0",
    "vue-template-compiler": "^2.6.10",
    "webpack": "^4.39.3"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "@vue/standard"
    ],
    "rules": {},
    "parserOptions": {
      "parser": "babel-eslint"
    }
  },
  "postcss": {
    "plugins": {
      "autoprefixer": {}
    }
  },
  "browserslist": [
    "> 1%",
    "last 2 versions"
  ]
}
javascriptvue.jsvuetify.jssass-loader
2
Jeroen Meijer

Je ne sais pas si c'est utile, mais mon npm run build erreurs au niveau des codes couleurs dans le thème. Lorsque je commente les lignes de code couleur, il se construit sans erreur:

    Vue.use(Vuetify, {
      theme: {
        "primary": "#FFCA28",
        "secondary": "#1976D2",
        "accent": "#82B1FF",
        "error": "#FF5252",
        "info": "#2196F3",
        "success": "#4CAF50",
        "warning": "#FB8C00"
      }
    })
0
user3379175