Alpine: module/nomodule pattern on Safari

Created on 22 Jun 2020  路  14Comments  路  Source: alpinejs/alpine

The pattern above is the module/nomodule pattern that will result in the modern bundle automatically loaded on modern browsers, and the IE11 bundle loaded automatically on IE11 and other legacy browsers.

Ref. loading of the ie11 bundle; this does not seem optimal in Safari, as it downloads the ie11 bundle even if it doesn't use it. In Chrome this works as advertised.

Most helpful comment

I checked again, too, and now I don't see the ie11 version in the network console. I'm certain I saw it the last time I checked. OK, then this is probably fine. The problem with "the other" solution (appending to the dom) is that you cannot easiliy control the order of import.

All 14 comments

@bep good point - didn't realise Safari didn't support the nomodule attribute, given that it supports the module attribute... what do you suggest?

what do you suggest?

I have no solution (other than the ugly "DOM append" method, but that makes it impossible to control the order). I mainly created this issue hoping someone other would chime in with something brilliant.

what do you suggest?

I have no solution (other than the ugly "DOM append" method, but that makes it impossible to control the order). I mainly created this issue hoping someone other would chime in with something brilliant.

Yeah, I mean the module/nomodule pattern is nice but if it doesn't work, I don't think there's any alternatives.

There's polyfill.io where you can request relevant polyfills based on the browser

Dunno how nice the build plays with that though

According to caniuse (https://caniuse.com/#feat=es6-module), safari supports nomodule in the latest versions. (Tested on safari 13.1).
It should be a problem only for safari 10.1 (last update 2017) and ios safari 10.3 (ipad 4 and iphone 5). Looking at the usage stat, it seems a really tiny market share (0.something%) so probably it's not worth to spend too much time on it. Previous versions don't support module at all (they'll be using the ie11 version) and latest versions have full support so it's just those 2 versions. I assume it's still working, just safari 10.1 will download an additional 28kb of code for nothing. What do you guys think?

I'm pretty sure that my 13.1.1 Safari downloads the IE11 version -- the app itself is working, so I assume it throws it away, but the download is wasteful.

Weird, I couldn't see the additional download in my network tab. I'll try again later.

I checked again, my safari does not download the ie11 version.
I was on 13.1.0, updated to 13.1.1 to double check but it's still working as expected.
Do you include the scripts using the following syntax?

        <script src="..." type="module"></script>
        <script src="...s" nomodule></script>

I checked again, too, and now I don't see the ie11 version in the network console. I'm certain I saw it the last time I checked. OK, then this is probably fine. The problem with "the other" solution (appending to the dom) is that you cannot easiliy control the order of import.

Since there is no problem here, this issue should be closed.

Since there is no problem here, this issue should be closed.

There is a reported problem.

Didn't we say (and check) that Safari supports the module/nomodule pattern and agreed that it doesn't download the ie11 version?

Yeah, I can't reproduce the problem and others can't either so I'm happy to close this issue. Somebody can reopen it if they face the problem again.

Hey all, going to close this issue now since nobody else has reported any problems. Feel free to re-open if you can reproduce with some evidence.

Was this page helpful?
0 / 5 - 0 ratings