[Bug Report] Vuetify doesn't seem to work on IE11

[Dev-Oli]

Environment

Vuetify Version: 2.2.20
Vue Version: 2.6.11
Browsers: Internet Explorer
OS: Windows 10

Steps to reproduce

• vue create ie-test
• cd ie-test
• vue add vuetify

Expected Behavior

The sample / demo page is shown on IE

Actual Behavior

Nothing is shown just a blank / empty page. No console errors / warnings are logged.
The

<div id="app"></div>

stays empty.
On Chrome, Firefox, Edge it's working as expected.

Other comments

This happens at the official https://vuetifyjs.com/en/getting-started/quick-start/ pages too. Sometimes you will get an empty page, sometimes you will see at least static content but nothing vuetify related. This seems to be random / not reproducible.

[billsliu]

Vuetify doesn't work in Edge 44 if you don't use Babel to compile.
https://github.com/vuetifyjs/vuetify/issues/10987

[LaurenceHo]

My project's website cannot be accessed from IE11 too. I tried everything I could do by following the instruction, but it didn't work. It's just a blank page. Still struggling with IE11 issue now.

[DRoet]

add transpileDependencies: ['vuetify'] to vue.config.js as described here:
https://vuetifyjs.com/en/getting-started/browser-support/

[Dev-Oli]

Hi @DRoet,

thanks for answering.

Unfortunately that's not the reason ... so please re-open this ticket. Not sure if it was me adding the transpileDependencies or if it was added while using the cli but it's there:
module.exports = { "transpileDependencies": [ "vuetify" ] }

As said neither the simple generated vuetify demo page (locally) nor the official vuetify page (online) is usable with IE 11.

[jacekkarczmarczyk]

We need the minimal reproduction @Dev-Oli to reopen the issue, create a simple project and provide the link to github repo (include the description of how did you create the project, including information on which options you've chosen, as well as your environment - vue cli version, node version)

[LaurenceHo]

add transpileDependencies: ['vuetify'] to vue.config.js as described here:
https://vuetifyjs.com/en/getting-started/browser-support/

As I said, I followed the instruction https://vuetifyjs.com/en/getting-started/browser-support/ step by step. Of course, I added transpileDependencies: ['vuetify'] to vue.config.js, and I did everything I could do. However, it's not working at all. I really want to know how you build this project for IE11? and how does it work?

I open the above instruction link in the IE11, the left side panel doesn't show up. Also, the whole layout looks different from Chrome or FF.

[Dev-Oli]

@jacekkarczmarczyk I've created a sample test repo at https://github.com/Dev-Oli/vuetify-ie11-bug. It provides nothing more than the description I've already added to this ticket (the most simple demo setup without modifying anything). By calling vue add vuetify the transpileDependencies seems to be already added.

As said before not even the official vuetify homepage is working at IE11. So I doubt that it's related to my local setup specifically.

[jacekkarczmarczyk]

Thank you @Dev-Oli , and what doesn't work in your reproduction? I was able to open it in IE11 both with yarn serve and yarn build

Documentation is another issue, already reported
#11046

[Dev-Oli]

@jacekkarczmarczyk Wow that's stunning :).
I've started it by calling npm run serve.

I just see a dead empty page. If I inspect the page source code there is just an empty <div id="app"></div>. No console errors are logged at all.

This is the IE11 I'm using on Win 10:

It's reproducible with every IE11 at our company.

It has been working until end of last year / january-february this year. I can't name the version it breaks as IE isn't our main focus :P.

[jacekkarczmarczyk]

Worked (*) using npm run serve on

(*) page was displayed, but with error in console (translates to "unspecified error")

[Dev-Oli]

Hmmm don't know what to say.
Purely IE "magic" lol.

As other users seems to be affected by this bug too maybe some other vuetify devs can please take a look and try to reproduce? As long as IE11 is at the supported browsers list I think this should be fixed, please re-open.

[jacekkarczmarczyk]

Can you first check if it works for you with yarn?

[Dev-Oli]

At least for me (with my IE version) I'm still getting an empty page while running yarn serve.

As it has been working before and it seems to be getting cached -> no errors show up.
But after deleting the browser cache (as a last desperate try) I've discovered an error at console:
SCRIPT438: the object doesn't support the property or method "assign" index.ts (147,1)
See stackoverflow
It seems that you should use a polyfill to fix this mozilla mdn

Not sure why it's been working for you as the mozilla mdn clearly states that it's unsupported at IE. Maybe your newer IE11 version got the assign support patched ;).

[jacekkarczmarczyk]

Ok, since that may be related to the IE version - could you please check the new vue cli project without vuetify and with

console.log(Object.assign({}));

in main.js?

If this works then might be some issue with vuetify or cli plugin, otherwise you'd probably need to manually add some polyfills (and we might need to add proper information in docs)

[Dev-Oli]

Adding the polyfill to public\index.html seems to fix this bug.

Creating a new simple vue project and adding the log statement (as mentioned above) results in the same console error.

It seems to be a vuetify issue because the object.assign is located at
node_modules\vuetify\src\services\theme\index.ts

[DRoet]

are you importing vuetify from vuetify/lib ?

[Dev-Oli]

@DRoet see attached demo github repo.

[jacekkarczmarczyk]

@DRoet that doesn't matter, the problem is that Object.assign is not being polyfilled, which seems strange to me as it was added to default polyfill in babel preset some time ago, see vuejs/vue-cli#1248 and vuejs/vue-cli@8dcfc18#diff-d8e341482c7dd4a7872d0eea73aa34d9R11
@Dev-Oli I'd actually suggest to creating an issue in vue repo since it happens also without Vuetify, what we could do is to add the information to docs, however it would be good to know what's causing the issue

[billsliu]

I can confirm the latest vuetify works perfectly on IE11, there is no problem.

[Dev-Oli]

@jacekkarczmarczyk Thanks for the sugguestion.
I've created a vue ticket as proposed, see vue 11382

[jacekkarczmarczyk]

@Dev-Oli can you confirm that vuejs/vue#11382 (comment) works in your case?

[DRoet]

I am using the updated browserlist in my project and it still works with IE11, I also cloned the repro and it runs fine in IE11 (11.0.185) npm run serve / npm run build

Which node version is being used here to run the commands?

[jacekkarczmarczyk]

@DRoet you're using same IE as me where it works, @Dev-Oli uses a different version

[DRoet]

@jacekkarczmarczyk I have an even older version of IE11 running it with no issues so I would be really surprised a random patch messed it up, but who knows 🤷‍♂️

the missing node version used to compile the project might be more interesting to look at.

[Dev-Oli]

@DRoet In the sample repo I've created yesterday at the README.md you can find the node version I'm using. It's v12.10.0

@jacekkarczmarczyk Removing "not dead" from the package.json browserslist I still can't use the Object.assign in a simple vue project (without using vuetify) as you suggested.

[jacekkarczmarczyk]

Oh, i missed that you already have not dead in package.json, so we're going back to "that's weird" stage

Anyway as it was suggested in vuejs/vue#11382 you should create an issue in vue-cli repo and WITHOUT Vuetify, so just vue create ..., change your main.js to just one line containing console.log(Object.assign({})), and provide all details (browser, node, vue cli etc versions) in the issue instead of linking to the discussion in other issue

[DRoet]

yeah idk if there is anything we can do here, building with 12.10.0 still works on my end

[Dev-Oli]

@DRoet Thanks for verifying. That's really strange. Maybe I find some time at the weekend to check it with my pc at home. If I remember it right it happened there too.

[Dev-Oli]

Hmmm "stranger things" part 2 to say the least.
Testing the console.log of the object.assign in a simple vue project (vue create + selecting the defaults) with the following system works:

• Win 7
• IE v11.0.9600.19596
• Node v13.10.1
• NPM v6.14.5
• @vue/cli v4.3.1

The only difference I see is the node version. The OS + browser version shouldn't play a role as it's a polyfill problem. But as it's working for @DRoet with node version v12 I don't know what else to check. I'll have to leave it up to the experts ;).

[LaurenceHo]

Just want to update how I resolved IE 11 issue. After struggling with IE 11 issue for a while, I decided to create a new VueJS + Vuetify project from the beginning. Before doing this, I upgraded VueCLI to 4.3.1. After creating a project by using VueCLI, I can access this new project from IE 11. (Suprised!)

I compared the new configuration files generated by VueCLI with the existing project, I found in this new project, it doesn't have babel-polyfill and @babel/preset-env. Instead, it has core-js and @vue/cli-plugin-babel installed. Besides, it doesn't need to place import 'babel-polyfill' in the main.ts either. No wonder it didn't work at all when I followed the instruction.

I migrated everything from the existing project to this new project, and now everything is working fine in IE 11. I think Vuetify might need to update the documentation (https://vuetifyjs.com/en/getting-started/browser-support/) for the browser support.

Here is system information:

• NPM: v6.13.4
• VueCLI: v4.3.1
• node: v12.16.1
• IE11 and windows 7

[Dev-Oli]

babel-polyfill is deprecated and core-js should be used instead, see https://github.com/zloirock/core-js#babelpolyfill.
The imports seems to be missing at main.js though
import "core-js/stable"; import "regenerator-runtime/runtime";

[LaurenceHo]

babel-polyfill is deprecated and core-js should be used instead, see https://github.com/zloirock/core-js#babelpolyfill.
The imports seems to be missing at main.js though
import "core-js/stable"; import "regenerator-runtime/runtime";

The generated main.js by VueCLU doesn't have import "core-js/stable"; import "regenerator-runtime/runtime"; and it works well in IE 11.

[KaelWD]

I created a new project using @vue/cli 4.5.6 and the default preset, added vuetify also with default settings and it works in IE11.