Menu
I have a project in vuejs + vuetify, the project is running fine on chrome browser but when I run the project on Internet Explorer 11 It only shows me the session pages and when i hit the login button it gives me this error
Unhandled promise rejection SyntaxError: Expected ':'
in console and I have to hit the login button twice to enter the app. Here I do not see the main content of page, only sidebar menu gets displayed and the main content is not renderd and I again get an error in my console which is
Unhandled promise rejection NavigationDuplicated: Navigating to current location(/dashboard/home/something) is not allowed
This is my 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"
}
This is how I am importing babel-polyfill in my 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'
})
]
}
}
994
The solution to the elusive “Unhandled Promise Rejection” error is always to register a rejection handler/callback using the .catch method on the promise. I hope this article doesn’t only help you get rid of that pesky error, but also help you understand why the error is occurring at a root level.
To recap, To register a rejection handler in a promise chain, you need to call the .catch method on the promise and pass it to your rejection handler. Finally, the Unhandled Promise Rejection error! Now that we have an idea of the different states of a promise, can you think of why the “Unhandled Promise Rejection” error may be occurring?
This error appears when a promise you created was rejected and there was no explicit .catch for it. The only thing I can suggest you is to check all your code and verify that all promises have .catch 'es at some point.
From the pending state, the promise can be moved into a resolved or rejected state. ##Whats a Resolved Promise? If the fetch operation is successful and the data is ready, the promise will then invoke the resolve method with the result.
I solved this issue by downgrading the version of vue2-dropzone, its latest version has some issues with IE11 and pass "vue2-dropzone" inside the transpileDependencies of your webpack file.
128
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
