Please let me know if you understand why my nuxt app fails on internet explorer. In the part of my code, I had used array.includes() which I realized is not supported by IE and removed but still not working. I do use forEach loops which should be supported by IE11
Console Error :
[Vuetify] [UPGRADE] 'v-content' is deprecated, use 'v-main' instead.
found in
---> <VMain>
<VApp>
<Layouts/default.vue> at layouts/default.vue
<Root>
TypeError: Unable to set property 'overflow' of undefined or null reference
{
[functions]: ,
__proto__: { },
description: "Unable to set property 'overflow' of undefined or null reference",
message: "Unable to set property 'overflow' of undefined or null reference",
name: "TypeError",
number: -2146823281,
stack: "TypeError: Unable to set property 'overflow' of undefined or null reference
at setProp (eval code:7154:7)
at updateStyle (eval code:7215:7)
at invokeCreateHooks (eval code:6059:7)
at createElm (eval code:5946:11)
at createChildren (eval code:6043:9)
at createElm (eval code:5944:9)
at createChildren (eval code:6043:9)
at createElm (eval code:5944:9)
at createChildren (eval code:6043:9)
at createElm (eval code:5944:9)",
Symbol(Lang fallback)_i.cu2qu2ppg6q: undefined,
Symbol(react.element)_h.cu2qu2ppg6q: undefined
}
TypeError: Object doesn't support property or method 'values'
{
[functions]: ,
__proto__: { },
description: "Object doesn't support property or method 'values'",
message: "Object doesn't support property or method 'values'",
name: "TypeError",
number: -2146827850,
stack: "TypeError: Object doesn't support property or method 'values'
at Application.prototype.update (eval code:40041:5)
at Application.prototype.register (eval code:40031:5)
at callUpdate (eval code:36617:9)
at created (eval code:36603:7)
at invokeWithErrorHandling (eval code:1853:5)
at callHook (eval code:4213:7)
at Vue.prototype._init (eval code:4998:5)
at VueComponent (eval code:5144:7)
at createComponentInstanceForVnode (eval code:3280:3)
at init (eval code:3111:7)",
Symbol(Lang fallback)_i.cu2qu2ppg6q: undefined,
Symbol(react.element)_h.cu2qu2ppg6q: undefined
}
TypeError: Unable to get property 'parentNode' of undefined or null reference
{
[functions]: ,
__proto__: { },
description: "Unable to get property 'parentNode' of undefined or null reference",
message: "Unable to get property 'parentNode' of undefined or null reference",
name: "TypeError",
number: -2146823281,
stack: "TypeError: Unable to get property 'parentNode' of undefined or null reference
at parentNode (eval code:5711:3)
at patch (eval code:6503:9)
at Vue.prototype._update (eval code:3942:7)
at updateComponent (eval code:4054:7)
at get (eval code:4473:5)
at run (eval code:4548:5)
at flushSchedulerQueue (eval code:4304:5)
at Anonymous function (eval code:1979:9)
at flushCallbacks (eval code:1905:5)
at run (eval code:75:13)",
Symbol(Lang fallback)_i.cu2qu2ppg6q: undefined,
Symbol(react.element)_h.cu2qu2ppg6q: undefined
}
Nuxt Config:
export default {
env: {
},
mode: 'spa',
/*
** Headers of the page
*/
router: {
trailingSlash: undefined, scrollBehavior: function (to, from, savedPosition) {
return { x: 0, y: 0 }
}
},
redirect: [
{
// eslint-disable-next-line
from: '(?!^\/$|^\/[?].*$)(.*\/[?](.*)$|.*\/$)',
to: (from, req) => {
const base = req._parsedUrl.pathname.replace(/\/$/, '');
const search = req._parsedUrl.search;
return base + (search != null ? search : '');
}
},
],
head: {
titleTemplate: '%s - ' + process.env.npm_package_name,
title: process.env.npm_package_name || '',
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: process.env.npm_package_description || '' }
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
{
rel: "stylesheet",
href:
"https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900"
},
{
rel: "stylesheet",
href:
"https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css"
},
{
rel: "stylesheet",
href:
"https://use.fontawesome.com/releases/v5.0.13/css/all.css"
},
{
rel: "stylesheet",
href:
"https://cdn.jsdelivr.net/npm/[email protected]/css/font-awesome.min.css"
},
{
rel: "stylesheet",
href:
"https://fonts.googleapis.com/css?family=Architects+Daughter|PT+Serif&display=swap"
},
{
rel: "stylesheet",
href:
"https://fonts.googleapis.com/css?family=Material+Icons"
},
{
rel: "stylesheet",
href:
"https://fonts.googleapis.com/css?family=Noto+Serif:400i&display=swap"
},
{
rel: "stylesheet",
href:
"https://cdn.quilljs.com/1.3.6/quill.snow.css"
}
], script: [
{ src: 'https://polyfill.io/v3/polyfill.min.js?version=3.52.1&features=es5%2Ces6%2Ces7%2CArray.prototype.forEach%2CArray.prototype.includes%2CArray.prototype.values%2CString.prototype.includes' }
]
},
/*
** Customize the progress-bar color
*/
loading: { color: '#fff' },
/*
** Global CSS
*/
css: ['~/assets/global.css'
],
/*
** Plugins to load before mounting the App
*/
plugins: [
{ src: '~/plugins/vue-json-viewer.js', mode: 'client' }, { src: '~/plugins/vueditor.js', mode: 'client' }
],
/*
** Nuxt.js dev-modules
*/
buildModules: [
'@nuxtjs/vuetify',
],
/*
** Nuxt.js modules
*/
modules: [
// Doc: https://axios.nuxtjs.org/usage
'@nuxtjs/axios', 'vue-scrollto/nuxt',
'@nuxtjs/redirect-module','vue-scrollto/nuxt',
],
/*
** Axios module configuration
** See https://axios.nuxtjs.org/options
*/
axios: {
},
/*
** vuetify module configuration
** https://github.com/nuxt-community/vuetify-module
*/
vuetify: {
customVariables: ['~/assets/variables.scss'],
theme: {
dark: false,
}
},
/*
** Build configuration
*/
build: {
extend(config, ctx) {
}
}
}
Package.json:
{
"private": true,
"scripts": {
"dev": "nuxt",
"build": "nuxt build",
"start": "nuxt start",
"generate": "nuxt generate"
},
"dependencies": {
"@nuxtjs/axios": "^5.3.6",
"@nuxtjs/redirect-module": "^0.3.1",
"nuxt": "^2.12.2",
"vue-json-viewer": "^2.2.11",
"vue-quill-editor": "^3.0.6",
"vue-scrollto": "^2.18.1",
"vuetify-loader": "^1.5.0"
},
"devDependencies": {
"@nuxtjs/vuetify": "^1.0.0"
},
"resolutions": {
"@nuxt/**/terser": "3.14.1"
}
}
--Update Maybe this will help someone in the future but if you have any polyfill issues where you can not use ES5/6/7 in IE11, and in NUXTJS:
GO to polyfill.io/v3/url-builder then select the functions you need and get the link and put it in nuxt.config.js in this format:
head:{
script: [
{ src: 'https://polyfill.io/v3/polyfill.min.js?version=3.52.1&features=es5%2Ces6%2Ces7%2CArray.prototype.forEach%2CArray.prototype.includes%2CArray.prototype.values%2CString.prototype.includes' }
]}
My issue regarding: Unable to set property 'overflow' of undefined or null reference Traced back to a SVG file and the foreignObject tag.