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'
})
]
}
}
fuente
@babel/preset-env
como 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)Respuestas:
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.
fuente