Rejeição de promessa não tratada SyntaxError: Expected ':' obtendo isso no IE11 com o projeto vuejs + vuetify


8

Eu tenho um projeto no vuejs + vuetify, o projeto está funcionando bem no navegador chrome, mas quando executo o projeto no Internet Explorer 11 Ele mostra apenas as páginas da sessão e, quando clico no botão de login, gera esse erro

Rejeição de promessa não tratada SyntaxError: Expected ':'

no console e eu tenho que apertar o botão de login duas vezes para entrar no aplicativo. Aqui não vejo o conteúdo principal da página, apenas o menu da barra lateral é exibido e o conteúdo principal não é renderizado e, novamente, recebo um erro no console que é

Rejeição de promessa não tratada NavigationDuplicated: não é permitido navegar para o local atual (/ dashboard / home / something)

Este é o meu 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"
  }

É assim que estou importando o babel-polyfill no meu 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'
            })
        ]
    }
}

A volta sintaxe onde o erro de sintaxe ocorre provavelmente seria útil (é uma questão do nome propriedade estenográfica?) Soa como algo que não está sendo transpiled direito
CertainPerformance

Eu não sei de onde este erro de sintaxe está saindo, porque ele só vem no IE.
Shashi verma

Entre no modo de dev e ter um olhar para a saída do console, deve haver um mapeamento para o arquivo no qual os resultados de erro em, ou pelo menos algo parecido
nonNumericalFloat

Você também deve @babel/preset-envsugerir vuetifyjs.com/en/getting-started/browser-support . Ainda assim, o IE11 poderia dar alguns problemas com os modelos. (se estiver usando vue-cli-3)
dreijntjens 6/12/19

Você pode postar o código relacionado (sobre a parte de login e a parte de navegação do menu da barra lateral) para reproduzir o problema como no exemplo Mínimo, Completo e Verificável ?
Zhi Lv - MSFT

Respostas:


1

Resolvi esse problema ao fazer o downgrade da versão do vue2-dropzone, sua versão mais recente apresenta alguns problemas com o IE11 e passa o "vue2-dropzone" dentro das transpileDependencies do seu arquivo webpack.

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.