Empty Site in IE 11

My Vue.js website is not working in IE 11 but works perfect in other modern browsers such as Google Chrome, Mozilla Firefox, Edge. In IE 11 the site is just empty.

package.json

{
“name”: “Chatwidget”,
“version”: “0.1.0”,
“private”: true,
“scripts”: {
“serve”: “vue-cli-service serve”,
“build”: “vue-cli-service build”,
“lint”: “vue-cli-service lint”,
“deploy”: “rsync -aczv dist/ kuncom@kunden.comspace.de:/home/kunden.comspace.de/pages/mememru/”
},
“dependencies”: {
“date-fns”: “^1.30.1”,
“debounce”: “^1.2.0”,
“leaflet”: “^1.4.0”,
“leaflet-defaulticon-compatibility”: “^0.1.1”,
“loglevel”: “^1.6.1”,
“marked”: “^1.1.1”,
“node-fetch”: “^2.3.0”,
“sanitize-html”: “^2.3.2”,
“url-search-params-polyfill”: “^5.1.0”,
“uuid”: “^3.3.2”,
“v-emoji-picker”: “^2.3.1”,
“vue”: “^2.5.21”,
“whatwg-fetch”: “^3.0.0”
},
“devDependencies”: {
@vue/cli-plugin-babel”: “^3.3.0”,
@vue/cli-plugin-eslint”: “^3.3.0”,
@vue/cli-service”: “^4.5.8”,
“babel-eslint”: “^10.0.1”,
“eslint”: “^5.12.0”,
“eslint-plugin-vue”: “^5.1.0”,
“node-sass”: “^4.11.0”,
“sass-loader”: “^7.1.0”,
“vue-template-compiler”: “^2.5.21”
},
“eslintConfig”: {
“root”: true,
“env”: {
“node”: true,
“jquery”: true
},
“extends”: [
“plugin:vue/essential”,
“eslint:recommended”
],
“rules”: {},
“parserOptions”: {
“parser”: “babel-eslint”
}
},
“postcss”: {
“plugins”: {
“autoprefixer”: {}
}
},
“browserslist”: [
“> 1%”,
“last 2 versions”,
“not ie <= 8”
]



babel.config.js

module.exports = {
presets: [
@vue/app’
]
}



vue.config.js

const conf = {
publicPath: ‘./’,
css: {
loaderOptions: {
// pass options to sass-loader
sass: {
// @/ is an alias to src/
data: @import "@/global/css/style.scss";
}
}
},
configureWebpack: {},
productionSourceMap: false,
}
if (process.env.NODE_ENV === ‘production’) {
conf.filenameHashing = false;
conf.configureWebpack.optimization = {
splitChunks: false
};
}
module.exports = conf;



I tried already to do stuff like adding Polyfills or Core.js in src/main.js but it didnt help to get this site running in IE 11.

This will be due to one of your dependancies.

Add this to your vue.config.js - it will break up all your dependancies into chunks, so you can see in the error logs of IE which package is causing the issue:

configureWebpack: {
    optimization: {
      runtimeChunk: 'single',
        splitChunks: {
          chunks: 'all',
          maxInitialRequests: Infinity,
          minSize: 0,
          cacheGroups: {
            vendor: {
              test: /[\\/]node_modules[\\/]/,
              name(module) {
              // get the name. E.g. node_modules/packageName/not/this/part.js
              // or node_modules/packageName
              const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1];

              // npm package names are URL-safe, but some servers don't like @ symbols
              return `npm.${packageName.replace('@', '')}`;
            }
          }
        }
      }
    }
  },

Then when you find which package is causing the issue, you need to transpile it by adding this to your vue.config.js:

  transpileDependencies: ['package-name']

OK thanks I will try it.

Now it gives me a Syntax Error at
npm.escape-string-regexp.js (11,1) . I added all dependencies to transpile as you said, but no progress. Still not running in Internet Explorer 11

My vue.config.js

const conf = {
	publicPath: './',
	css: {
		loaderOptions: {
			// pass options to sass-loader
			sass: {
				// @/ is an alias to src/
				data: `@import "@/global/css/style.scss";`
			}
		}
	},
	configureWebpack: {
		optimization: {
      runtimeChunk: 'single',
        splitChunks: {
          chunks: 'all',
          maxInitialRequests: Infinity,
          minSize: 0,
          cacheGroups: {
            vendor: {
              test: /[\\/]node_modules[\\/]/,
              name(module) {
              // get the name. E.g. node_modules/packageName/not/this/part.js
              // or node_modules/packageName
              const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1];

              // npm package names are URL-safe, but some servers don't like @ symbols
              return `npm.${packageName.replace('@', '')}`;
            }
          }
        }
      }
    }
	},
	productionSourceMap: false,
	transpileDependencies: ['date-fns','debounce','leaflet','leaflet-defaulticon-compatibility',
	'loglevel','marked','node-fetch','sanitize-html','url-search-params-polyfill','uuid','v-emoji-picker','vue','whatwg-fetch','escape-string-regexp'
	],
}
if (process.env.NODE_ENV === 'production') {
	conf.filenameHashing = false;
	conf.configureWebpack.optimization = {
		splitChunks: false
	};
}

module.exports = conf;

You don’t need to transpile all dependencies - just the ones giving errors.

Based on that, there’s an issue with the escape-string-regexp package, though being a syntax error, I’m unsure what the issue would be. Does debugging not show you what characters are causing the issue?

Just an assumption - the package looks like it’s built in typescript, Vue2 (if that’s the version you’re using), isn’t really made for typescript, so it could potentially be related to that.

You may need to replace the package with another.

This error is appearing if I start app with npm run serve. If I execute npm run build the errors are different. Then I have something like “identifier expected” and my whole vue.js component which I call via domcontentload eventhandler is undefined… It’s very hard to understand the issue Internet Explorer 11 has with my code

Block quote
You don’t need to transpile all dependencies - just the ones giving errors.

And how do I understand which one is causing the error? If I transpile all dependencies, shouldnt the problem be solved already? I don’t understand it.

Blockquote
Just an assumption - the package looks like it’s built in typescript, Vue2 (if that’s the version you’re using), isn’t really made for typescript, so it could potentially be related to that.

I ve tried it already with vue.js 3 and it didn’t change anything

Blockquote
identifier expected: (function(e){let{existsSync:r,readFileSync:i}=n(3),{dirname:o,join:s}=n(“df7c”),a=n(“dc74”);function c(t){return e?e.from(t,“base64”).toString():window.atob(t)}class u

Blockquote
Chatwidget is undefined in Index.html: window.addEventListener(‘DOMContentLoaded’, function(){
Chatwidget.initChatWidget(document.getElementById(‘chatwidget’), ChatwidgetConfig, ChatwidgetUser);

These are the errors i receive after build with vue.js (npm run build) , for npm run serve its above mentioned error.

Transpiling is basically like polyfills. It attempts to compile code from one language to another, like Typescript to plain Javascript.

The chatwidget error is different to the original one.
Is that from a package? It could be a number of reasons why that’s not working.
I’d assume the script is trying to access the Chatwidget function before it has been made available.

Without the code, it’s pretty hard to debug - but you’ve already made the first steps to solve it.

@w3jay, the EventListener should call the function Chatwidget.initChatWidget if the Dom is completely loaded with app.js:

window.addEventListener(‘DOMContentLoaded’, function(){
Chatwidget.initChatWidget(document.getElementById(‘chatwidget’), ChatwidgetConfig, ChatwidgetUser); 

That’s why I think the errors in app.js or chunk-vendor.js affect the Index.html so that Chatwidget.initChatWidget is not executed.

You know how I can solve the errors in app.js or chunk-vendor.js ? I think it s code is not executed in Internet explorer 11

What’s the chat widget?

You could try something like vue-plugin-load-script - npm
It loads the script as a promise, and continues after the script is resolved.

Otherwise, check if the script also has an npm package that you could import into your project instead.

@w3jay , chat widget is the main part of my application in app.js and its not loaded correctly by IE 11 even when the DOM of index.html was build completely. Thx for your tip. I will try vue-plugin-load-script

@w3jay , by the way. I found out something interesting. When i create empty projects with vue3.js they are not shown in Internet Explorer 11 from beginning because the script is not loaded but with vue2.js they are. I had vue3.js in the beginning and migrated it down to vue2.js . But still not working. I think this issue could be related with the problem that my app which is working perfect in Chrome,Edge, Firefox is not showing in IE 11. Maybe it has still vue3.js functionality somewhere.

Sorry, I assumed it was all Vue 2.
Yeah Vue 3’s new reactive system, ES6 proxies aren’t compatible with IE11.
You could explore ES6 polyfills to add aswell. IE11 is dying out, can you have the option of putting an IE11 fallback telling users to update their browser?

You’d essentially add this script in the public/index.html

Sorry that i just mention it now.
I thought the most important thing is that i insert into the config files of my app package.json , babel.config.js and vue.config.js the vue2 dependencies and configurations, run npm install and thats it. I thought if something is not compatible for IE 11, babel will tell me and i can decide to leave it away. Unfortunately its not that easy to migrate a vue3.js app to vue2.js to make it run in Internet Explorer 11. Unfortunately its not my decisicion which browser i need to support but the decision of my bosses :frowning: Well i try to find further informations.

You could try import different polyfills into the main.js file, one may be able to do the conversion for IE11.
Though I haven’t tried to get Vue3 to work for IE myself.

or even es6-polyfill - npm may help

1 Like

@w3jay , my problem was solved. Problem for Internet Explorer is the “sanitize-html”: “^2.3.2” and "emoji-picker”: “^2.3.1” . Both dependencies arent compatible with IE 11. Solution: Build 2 versions: 1 for IE and 1 for modern browsers like Chrome, Firefox and Edge. Thx for your help by the way

1 Like