Rechazo de promesa no manejado SyntaxError: Se esperaba ':' obtener esto en IE11 con vuejs + vuetify project


8

Tengo un proyecto en vuejs + vuetify, el proyecto se está ejecutando bien en el navegador Chrome, pero cuando ejecuto el proyecto en Internet Explorer 11 solo me muestra las páginas de sesión y cuando presiono el botón de inicio de sesión me da este error

Rechazo de promesa no manejado SyntaxError: Se esperaba ':'

en la consola y tengo que presionar el botón de inicio de sesión dos veces para ingresar a la aplicación. Aquí no veo el contenido principal de la página, solo se muestra el menú de la barra lateral y el contenido principal no se representa y nuevamente recibo un error en mi consola que es

Rechazo no prometido de la promesa Navegación Duplicado: no está permitido navegar a la ubicación actual (/ tablero / inicio / algo)

Este es mi paquete.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"
  }

Así es como estoy importando babel-polyfill en mi 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'
            })
        ]
    }
}

La sintaxis alrededor del lugar donde se produce el error de sintaxis probablemente sería útil (¿es un problema de nombre abreviado de la propiedad?) Parece que algo no se transpira correctamente
CertainPerformance

No sé de dónde sale este error de sintaxis, porque solo viene en IE.
shashi verma

Ingrese al modo de desarrollo y eche un vistazo a la salida de la consola, debe haber una asignación al archivo en el que se produce el error, o al menos algo similar
nonNumericalFloat

Hágalo también @babel/preset-envcomo se sugiere en vuetifyjs.com/en/getting-started/browser-support . Aún así, IE11 podría dar algunos problemas con las plantillas. (si usa vue-cli-3)
dreijntjens

¿Puede publicar el código relacionado (sobre la parte de inicio de sesión y la parte de navegación del menú de la barra lateral) para reproducir el problema como en el ejemplo Mínimo, Completo y Verificable ?
Zhi Lv - MSFT

Respuestas:


1

Resolví este problema bajando la versión de vue2-dropzone, su última versión tiene algunos problemas con IE11 y pasa "vue2-dropzone" dentro de las dependencias transpile de su archivo webpack.

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.