search

johannschopplich / kirby-vue3-starterkit

✨ Kirby + Vue SPA starter: automatic routing, i18n, SEO and more!
MIT License
206 stars 19 forks source link

Edge 44 not working #13

Closed Mark-Pilkington closed 3 years ago

Mark-Pilkington commented 3 years ago

Hi, I noticed that the starterkit is not working in Edge 44 although it supports ESM. Always defaults to the Default.vue template without throwing any error message. Maybe that should be in the docs 🤷‍♂️

(Built a website but only noticed in the end that it doesn't work lol 😅) vite legacy plugin did not help btw

johannschopplich commented 3 years ago

There has been a bug in Vite which was fixed yesterday. This may causes your issue: https://github.com/vitejs/vite/commit/bbfe06ce1af8f89490032e609377c6516f7da773. Are you using the latest version of this starterkit? I've updated to the latest Vite version just this morning. Make sure you're using ^2.0.0-beta.19.

Haven't tested in older Edge versions, only the Chromium-based ones. It should work tho, since the target ES version is ES 2018, which is supported by older Edge versions like Edge 44. See: https://github.com/johannschopplich/kirby-vue3-starterkit/blob/094eb0a0ff45c65651fad31881c7b994bc999457/vite.config.js#L17

Mark-Pilkington commented 3 years ago

Hi, yeah I updated vite today as well.

Yeah, I saw the target version. I also tried adding the legacy setting in the vite config file to no avail.

It's weird that there's no error message in Edge 44 at all. I guess it's loading the modules though because it's showing/pulling the default.vue template instead of nothing at all. (Instead of the actual corresponding page template.)

Anyways, maybe it doesn't have anything to do with your starterkit but with Vue 3 itself.

I can probably argue to the client that the website is made to last and therefore supporting modern browsers rather than old ones lol

johannschopplich commented 3 years ago

First of all: Delighted to hear you've built a project with my starterkit!

Back to the problem: tbh I've no idea what may causes this issue. You've tried what I would've tried as well. The core logic for dynamic imports and part of the starterkit responsible for template resolving is this line: https://github.com/johannschopplich/kirby-vue3-starterkit/blob/094eb0a0ff45c65651fad31881c7b994bc999457/frontend/src/router/index.js#L20

Dynamic should work, no idea why they don't. Have you tried targeting es2016? I'm afraid I've have only access to the current version of Edge.

Support for legacy Edge is ending on March 9 2021... I guess you can tell your client it's unsafe to rely on the legacy Edge versions anyhow. And Microsoft is force-updating older Edge versions. So I hope the problem will vanish soon...

johannschopplich commented 3 years ago

The issue doesn't seem to originate in the starterkit, but rather transpilation by ESBuild (used by Vite) or something down the pipeline.

Mark-Pilkington commented 3 years ago

Yeah, I tried 2016 as well. 😕 Ah, didn't know they're force updating, cool. I was just told Firefox 48 (from 2016 though) doesn't work either. But yeah like you said, it's probably Vite-related. Could be anything since it's not showing any error. 🤷‍♂️

Mark-Pilkington commented 3 years ago

And also not on Safari 6.1.6 (2015), so maybe there's a common denominator between those 3 browsers.

johannschopplich commented 3 years ago

~Seems like a bug if three rendereing engines won't work. I've retested in Chrome, Safari and Firefox – all of them work. Are you sure the template is existing? How is your folder structure set up? Is the first letter of Vue's template uppercase?~

Please test https://kirby-vue3-starterkit.jhnn.dev. Uses the latest version of this starterkit and it works.

johannschopplich commented 3 years ago

If no error is thrown, then the template doesn't exist and the import function falls back to the default template. ~I think the problem's source lies in your project.~

Edit: Common denominator must be legacy status. Using browsers from 2015 is tricky. Then even ES2015 wouldn't help. Would have to be transpiled to pre ES5-era. I guess that's not even a Vite bug – import transpilation may just not work that well for older browsers.

Sorry, but I can give only give support for ever-green browsers. Your client really has to update his browsers. Apart from the beauty of modern web techniques it's a great security risk...

Mark-Pilkington commented 3 years ago

Hm, it might indeed because also Firefox 61 from 2018 doesn't work. Oh shit. 😕 I don't really understand though, because the latest browsers all work, so that means every file is in place.

Mark-Pilkington commented 3 years ago

No, I totally understand, the old browsers should finally retire

Mark-Pilkington commented 3 years ago

Ok, I tested the example page you link to in Firefox 61 from 2018 and it doesn't work either. Only the intro is showing. I also tested it on different machines, not just mine.

Edit: Your files exist though, the browser is fetching them successfully with a 200 OK code.

Bildschirmfoto 2021-01-10 um 22 16 54
johannschopplich commented 3 years ago

One last thing you can do: https://github.com/johannschopplich/kirby-vue3-starterkit/commit/fa9bc8c3e8aaacd60e505b8750481e2ef70559b2

Browser compatibility target for the final bundle was es2018, but it's better to use the Vite default. The default value is a Vite special value, modules, which targets browsers with native ES module support: https://caniuse.com/es6-module

Native ESM support shipped in Firefox 60. It should work then.

Mark-Pilkington commented 3 years ago

Unfortunately your suggestion didn't work.

In the developer tools however, I saw that it's loading the modules as html whereas the index.js is loaded as js. That is also the case on your website. Might be why it's not rendering the js files.

EDIT: Ah, it's loading as HTML because error page is being loaded thus as HTML.

I discovered though, that the paths are messed up – on a newer browser it's loading www.example.com/assets/sometemplate.js whereas on 2018 browsers it's loading www.example.com/sometemplate.js without the assets.

Do you have any clue why that might be?

Mark-Pilkington commented 3 years ago

Ok, great success!

I changed the paths to the modulesjs files inside the router-part of the index.js (set by the router index.js) to absolute paths. So now it works in the ancient browsers as well.

Like said before, the older browsers don't load the modules because of the relative paths set by the router. 🤷‍♂️

Bildschirmfoto 2021-01-10 um 23 50 09
johannschopplich commented 3 years ago

Sorry, that my suggestion didn't work. 🙈 I did some digging: Dynamic imports are only supported by Firefox 67+... (https://caniuse.com/es6-module-dynamic-import)

Great catch! I thought supporting relative path's would be even an requirement of the ES modules spec. Nevertheless, great to see you've found a workaround for older browsers!

johannschopplich commented 3 years ago

Unfortunately Vite doesn't support post-build plugins (after minification etc.), otherwise you could've written a small Vite plugin to replace the relative paths programmatically. But maybe a plain Node script will ease the process. Maybe in half a year those browsers won't have to be supported by you no more. 😄

Mark-Pilkington commented 3 years ago

"But maybe a plain Node script will ease the process."

Uh, I think that's beyond my skills 😃 But thanks for the tip! Yeah, I guess it should be time to send those old browsers into oblivion.