Closed Dev-Oli closed 3 years ago
Vuetify doesn't work in Edge 44 if you don't use Babel to compile. https://github.com/vuetifyjs/vuetify/issues/10987
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.
add transpileDependencies: ['vuetify']
to vue.config.js
as described here:
https://vuetifyjs.com/en/getting-started/browser-support/
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.
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)
add
transpileDependencies: ['vuetify']
tovue.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.
@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.
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 https://github.com/vuetifyjs/vuetify/issues/11046
@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.
Worked (*) using npm run serve
on
(*) page was displayed, but with error in console (translates to "unspecified error")
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.
Can you first check if it works for you with yarn
?
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 ;).
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)
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
are you importing vuetify from vuetify/lib
?
@DRoet see attached demo github repo.
@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 https://github.com/vuejs/vue-cli/issues/1248 and https://github.com/vuejs/vue-cli/commit/8dcfc184cf3edbbbeaa42cdc8f162146b9ba71d9#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
I can confirm the latest vuetify works perfectly on IE11, there is no problem.
@jacekkarczmarczyk Thanks for the sugguestion. I've created a vue ticket as proposed, see vue 11382
@Dev-Oli can you confirm that https://github.com/vuejs/vue/issues/11382#issuecomment-625559160 works in your case?
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?
@DRoet you're using same IE as me where it works, @Dev-Oli uses a different version
@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.
@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.
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 https://github.com/vuejs/vue/issues/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
yeah idk if there is anything we can do here, building with 12.10.0
still works on my end
@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.
Hmmm "stranger things" part 2 to say the least.
Testing the console.log of the object.assign in a simple vue project (vue create
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 ;).
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:
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";
babel-polyfill
is deprecated andcore-js
should be used instead, see https://github.com/zloirock/core-js#babelpolyfill. The imports seems to be missing at main.js thoughimport "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.
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.
Environment
Vuetify Version: 2.2.20 Vue Version: 2.6.11 Browsers: Internet Explorer OS: Windows 10
Steps to reproduce
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
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.