Nicht behandelte Ablehnung von Versprechungen SyntaxError: Erwartet ':', um dies auf IE11 mit vuejs + vuetify project zu erhalten

Ich habe ein Projekt in vuejs + vuetify, das Projekt läuft einwandfrei im Chrome-Browser, aber wenn ich das Projekt in Internet Explorer 11 ausführe, werden mir nur die Sitzungsseiten angezeigt, und wenn ich auf die Anmeldeschaltfläche drücke, wird dieser Fehler angezeigt

Nicht behandelte Versprechen ablehnen SyntaxError: Erwartet ':'

in der Konsole und ich muss die Anmeldeschaltfläche zweimal drücken, um die App aufzurufen. Hier sehe ich nicht den Hauptinhalt der Seite, nur das Seitenleistenmenü wird angezeigt und der Hauptinhalt wird nicht gerendert und ich erhalte erneut einen Fehler in meiner Konsole

Nicht behandelte Ablehnung von Versprechungen NavigationDupliziert: Das Navigieren zum aktuellen Standort (/ dashboard / home / Something) ist nicht zulässig

Das ist meine package.json

  "dependencies": {
    "@types/leaflet": "^1.5.1",
    "algoliasearch": "^3.33.0",
    "amcharts3": "^3.21.14",
    "auth0-js": "^9.11.3",
    "axios": "^0.19.0",
    "babel-polyfill": "^6.26.0",
    "chart.js": "^2.8.0",
    "echarts": "^4.2.1",
    "firebase": "^6.4.2",
    "instantsearch.css": "^7.3.1",
    "jquery": "^3.4.1",
    "leaflet": "^1.4.0",
    "moment": "^2.22.2",
    "nprogress": "^0.2.0",
    "screenfull": "^4.2.1",
    "slick-carousel": "^1.8.1",
    "velocity-animate": "^1.5.2",
    "vue": "^2.6.10",
    "vue-chartjs": "^3.4.2",
    "vue-count-to": "^1.0.13",
    "vue-croppa": "^1.3.8",
    "vue-draggable-resizable": "^2.0.0-rc1",
    "vue-echarts": "^4.0.3",
    "vue-fullcalendar": "^1.0.9",
    "vue-fullscreen": "^2.1.5",
    "vue-i18n": "^8.14.0",
    "vue-instantsearch": "^2.3.0",
    "vue-loading-spinner": "^1.0.11",
    "vue-notification": "^1.3.16",
    "vue-perfect-scrollbar": "^0.2.0",
    "vue-quill-editor": "^3.0.6",
    "vue-radial-progress": "^0.2.10",
    "vue-resource": "^1.5.1",
    "vue-router": "^3.1.2",
    "vue-slick": "^1.1.15",
    "vue-star-rating": "^1.6.1",
    "vue-tour": "^1.1.0",
    "vue-video-player": "^5.0.2",
    "vue-wysiwyg": "^1.7.2",
    "vue2-breadcrumbs": "^2.0.0",
    "vue2-dragula": "^2.5.4",
    "vue2-dropzone": "^3.6.0",
    "vue2-google-maps": "^0.10.7",
    "vue2-leaflet": "^2.2.1",
    "vuedraggable": "^2.20.0",
    "vuetify": "^2.0.11",
    "vuex": "^3.0.1",
    "weather-icons": "^1.3.2",
    "webpack": "^4.39.3"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.11.0",
    "@vue/cli-service": "^3.11.0",
    "deepmerge": "^4.0.0",
    "fibers": "^4.0.1",
    "sass": "^1.22.10",
    "sass-loader": "^7.3.1",
    "vue-template-compiler": "^2.6.10"
  }

So importiere ich babel-polyfill in meine main.js

import 'babel-polyfill';
import Vue from 'vue'
import vuetify from '@/plugins/vuetify'
import * as VueGoogleMaps from 'vue2-google-maps'
import { Vue2Dragula } from 'vue2-dragula'
import VueQuillEditor from 'vue-quill-editor'
import wysiwyg from 'vue-wysiwyg'
import VueBreadcrumbs from 'vue2-breadcrumbs'

babel.config.js

module.exports = {
  presets: [
    ["@vue/app", {
      modules: "commonjs"
    }]
  ]
}

vue.config.js

const path = require('path');
const webpack = require('webpack');

module.exports = {
    publicPath: process.env.NODE_ENV == 'production' ? '/' :  '/',
    css: {
        sourceMap: true
    },
    productionSourceMap: false,
    transpileDependencies: [
        /\/node_modules\/vuetify\//,
        /\/node_modules\/vue-echarts\//,
      /\/node_modules\/resize-detector\//
    ],
    configureWebpack: {
          resolve: {
            alias: {
                Api: path.resolve(__dirname, 'src/api/'),
                Components: path.resolve(__dirname, 'src/components/'),
                Constants: path.resolve(__dirname, 'src/constants/'),
                Container: path.resolve(__dirname, 'src/container/'),
                Views: path.resolve(__dirname, 'src/views/'),
                Helpers: path.resolve(__dirname, 'src/helpers/'),
                Themes: path.resolve(__dirname, 'src/themes/')
            },
            extensions: ['*', '.js', '.vue', '.json']
        },
        plugins: [
              //jquery plugin
            new webpack.ProvidePlugin({
                $: 'jquery',
                jquery: 'jquery',
                'window.jQuery': 'jquery',
                jQuery: 'jquery'
            })
        ]
    }
}

— Shashi Verma
quelle

Die Syntax, um die herum der Syntaxfehler auftritt, wäre wahrscheinlich hilfreich (handelt es sich um ein Problem mit dem Namen der Kurzform?). Klingt so, als würde etwas nicht richtig

— transpiliert

Ich weiß nicht, woher dieser Syntaxfehler kommt, da er nur im IE auftritt.

— Shashi Verma

Rufen Sie den Dev-Modus auf und sehen Sie sich die Konsolenausgabe an. Es sollte eine Zuordnung zu der Datei geben, in der der Fehler

— auftritt

Dit Sie auch @babel/preset-envwie auf vuetifyjs.com/de/getting-started/browser-support vorgeschlagen . Trotzdem könnte IE11 einige Probleme mit den Vorlagen verursachen. (bei Verwendung von vue-cli-3)

— dreijntjens

Können Sie den zugehörigen Code (zum Anmeldeteil und zum Navigationsbereich des Seitenleistenmenüs) veröffentlichen, um das Problem wie im Beispiel " Minimal", "Vollständig" und "Überprüfbar" zu reproduzieren ?

— Zhi Lv - MSFT

Ich habe dieses Problem durch ein Downgrade der Version von vue2-dropzone gelöst. Die neueste Version weist einige Probleme mit IE11 auf und übergibt "vue2-dropzone" in den transpileDependencies Ihrer Webpack-Datei.

— Shashi Verma
quelle