Vue CLI 3 and IE 11 not Working


#1

Hello everyone!
I new to Vue and used vue-cli 3 to create the sample “Hello World Project”.

The project is completely stock but no working at IE11.

Despite finding people with the same issue, after searching the web, I couldn’t find any solution.

The error showed at I.E’s 11 console is the “SCRIPT1002: Sintax Errror” with description:
“eval(”\nconst ansiRegex = webpack_require(/*! ansi-regex */ “./node_modules/ansi-regex/index.js”)…"

In my babel.config.js I have the “@vue/app” preset.
In my package.json I have the following settings for browserslist:

  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]

According to all read documentation, untill now, everything seems ok, but the app keeps not running in Internet Explorer.

Can anyone help me with this or at least guide me to a possible solution?

Best regards!


#2

Internet explorer does not support promises. You should add a polyfill for that.

More info here:


#3

Whilst entirely true, as far as I know, the default installation shouldn’t require any Promise support. I just spun up a default install on IE11 and it loaded just fine so I suspect there’s something else at play here.


#4

Yes, cli 3 adds a promise polyfill by default - but until 3.0.0-rc.4, there as an additional polyfill missing: es6.array.iterator

So: what version are you on?


#5

So, others are troubled with IE. I had a nice vueJS web app all wrapped up and delivered, but my clients wanted it to work in Internet Explorer, because their customers all use IE I guess. Few of the vue.js routines were even executing, so the pages were mostly blank. After some futzing, and seeing all the machinations with Babel to get it to work, I bagged it and decided to strip out the vue.js code and rewrote it all with jQuery. The site works and looks exactly the same , but runs much more universally. This is unfortunate. I just couldn’t see having huge libraries of code just to make a very simple flat HTML site to run.


#6

Hi LinusBorg, just checked here and I’m using vue cli 3.0.0-rc.5.

Regards


#7

Hi esperedo, I tried to polyfill according to this documentation, despite this note …

“Note that es6.promise is included by default because it’s very common for libs to depend on Promises.”

Anyway, I “polyfilled” like explained here:
https://cli.vuejs.org/guide/browser-compatibility.html#polyfills

// babel.config.js
module.exports = {
  presets: [
['@vue/app', {
  polyfills: [
    'es6.promise',
    'es6.symbol'
  ]
}]
  ]
}

but got below errors after running “npm run serve”:

"…unknow option: .polyfills"

Then removed this settings and tried to import directly in the main.js file:
import “@babel/polyfill”

Now npm run serve starts fine, but got the same blank page on I.E.

Also tried to import ‘es6-promise’ inside main.js file and kept with the same I.E error.

am I missing something?

Regards.


#9

Hello again, everyone!
Well, I managed to make the app work in I.E. I’m completely sure it’s the wrong way though.
As I said previously, the error description points to ansi-regex module.
So I removed this directory from node_modules and it started rendering at I.E… now I’m just waiting anything that requires this module and breaks the whole app :disappointed_relieved:

Seems to me that if I “tell” babel to transpile this module it won’t have to be removed, but I’m not sure about this.

Has anyone ever done such thing?

Cheers!


#10

Looking at the source of ansi-regex you can see that it uses an arrow function, which is ES6 syntax and not supported in IE:

Since this module has not been transpiled to ES5 with babel by the author, and vue-cli doesn’t transpile anything from /node_modules by default (would kill performance, amongst other things) this code is inserted into your bundle as it is, which breaks in IE.

But: vue-cli offers a nice options: transpileDependencies.

To use it, create a vue.config.js file in your project root directory (if you don’t already have one), and add this:

module.exports = {
  transpileDependencies: ['ansi-regex']
}

#11

Hello LinusBorg, thanks for the help again, seems to be leading to a solution.
But after doing as you explained, now I got some different errors, and Vue app is not running in any browser.

The errors are:

  • From Chrome:

    Uncaught TypeError: Cannot assign to read only property ‘exports’ of object ‘#<Object>’

  • From I.E:

SCRIPT5045

module.exports = () => {
        	const pattern = [
        		'[\\u001B\\u009B][[\\]()#;?]*(?:(?:(?:[a-zA-Z\\d]*(?:;[a-zA-Z\\d]*)*)?\\u0007)',
        		'(?:(?:\\d{1,4}(?:;\\d{0,4})*)?[\\dA-PRZcf-ntqry=><~]))'
        	].join('|');

return new RegExp(pattern, 'g');

Cannot assign to read only property in ‘strict’ mode

So is the same error in both browsers at least.
Do you, by any chance, have any ideia what is going on?

Cheers!


#12

Please try to use

const ansiRegex = require('ansi-regex')

instead of

import ansiRegex from 'ansi-regex'

Not sure if it will help but generally the better approach when importing commonjs modules.

Edit:

that won’t work either, I’m afraid. This is a bad edge case of webpack and @babel/preset-env injecting polyfills into the transpiled module with import, putting the module into strict mode which triggers this error.

I just wrote this up in an older issue on github, including a workaround:

…but in your specific case, where the code of that module is barely 5 lines long, I would simply copy the code into the project and remove the dependency altogether.


#13

@wandss. I started out with Vue Js recently and while writing test for some sample vue-cli created app I wrote, I hit this annoying Cannot assign to read only property ‘exports’ of object '#' error. As a simple app, I checked and ensured that I was not mixing module.exports and import in my code (this has often been linked to the error) and several trials did not get the test running though webpack compiles well.

I realized that commenting out the preset: @vue/app in babel.config.js solved the issue


#14

@LinusBorg Its becoming clear to me that there is some little confusion as to the correct babel preset plugin. The docs state that vue apps created from vue-cli use the @vue/babel-preset-app and its repeated on the github page, indicating that its already included in every vue-cli created app, in node_modules.

However, there is another babel preset plugin. I observe that this one is added automatically in the babel.config.js file when setting-up environment for testing and this breaks tests.

Trying [’@vue/babel-preset-app’] and [’@vue/app’] as presets value does not work. Leaving it empty works.