Edge 44 not working

[johannschopplich]

Edge 44 not working

[johannschopplich]

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:

kirby-vue3-starterkit/frontend/src/router/index.js

Line 20 in 094eb0a

component: () => import(`../views/${capitalize(page.template)}.vue`).catch(() => Default)

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...

[Mark-Pilkington]

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

[johannschopplich]

There has been a bug in Vite which was fixed yesterday. This may causes your issue: vitejs/vite@bbfe06c. 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:

kirby-vue3-starterkit/vite.config.js

Line 17 in 094eb0a

target: 'es2018'

[Mark-Pilkington]

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]

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]

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]

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

[johannschopplich]

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]

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]

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]

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.

[johannschopplich]

One last thing you can do: fa9bc8c

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]

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]

Ok, great success!

I changed the paths to the modules js 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. 🤷‍♂️

[johannschopplich]

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]

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]

"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.