Chrome 123 running the polyfill

[mangelozzi]

I have been using this script for a long time, and it has been great thank you!

However lately I noticed that my Chrome desktop (Version 123.0.6312.58 (Official Build) (64-bit)) is firing the polyfill, it never used to as far as I can remember (...I think?).

I see (which I would only expect to see if old browsers, iOS phones, etc):

^^ Module error above is polyfilled and can be ignored ^^

This is how I use the polyfill (updated to the latest but still see the same issue):

<script>window.esmsInitOptions = { polyfillEnable: ['css-modules', 'json-modules'] }</script>
<script async src="...self hosted/es-module-shims.min.js"></script>

As far as I understand Chrome support css-modules and json-modules so the polyfill should not be firing?

The strange thing is it only does it on my deployed version (hosted online), not on my localhost dev environment, which is why I haven't noticed it for so long.

I was using assert but changed to with (but saw not difference):

import sheet from 'https://site.com/sheet.css' assert { type: 'css' };

tried

import sheet from 'https://site.com/sheet.css' with { type: 'css' };

Apologies if this issue to too thin on details to be of any help, if there's any detail you recommend I add, I would be happy to try improve it, cheers

[guybedford]

You need to be using with here and that should make the difference - ie it shouldn't work in Chrome 123.

That is, we don't currently support rewriting the with into an assert so that browsers that support assert but not with are still deemed necessary to polyfill.

We could add support for rewriting with into assert for these browsers only, but the risk here is then triggering unnecessary warnings unless we literally version sniff the Chrome version which seems non ideal.

So I think just not polyfilling Chrome 123 and earlier makes more sense here.

//cc @nicolo-ribaudo

[nicolo-ribaudo]

We could add support for rewriting with into assert for these browsers only, but the risk here is then triggering unnecessary warnings unless we literally version sniff the Chrome version which seems non ideal.

The check would be "is with supported?", and that doesn't trigger any warning. Chrome only warns if you check "is assert supported?" in versions that support "with".

[guybedford]

Yes that's the check we do today, it just means that browsers that only support assert but not with won't utilize native CSS and JSON module support in es-module-shims. Adding a fallback path to the detection to detect assert if with is not supported could be done here, but seems overkill for a couple of browser versions that won't matter in time.

Therefore, I'm tempted to close this out as by design. Unless I'm missing something or have the diagnosis wrong that Chrome 123 supports assert and not with.

[mangelozzi]

Thanks for looking into this. I am now using with. I have tested with a deployment using assert and with in Chrome v123

Both of them give this printout:

es-module-shims.min.613ef9164464.js:1 ^^ Module error above is polyfilled and can be ignored ^^

I.e. Chrome is running the polyfill, but I think it should not since Chrome already supports the required behavior.

However when running the website locally Chrome does not print out that line (i.e. it is not running the polyfill). My question is more about why is the polyfill running when chrome supports the behavior? My hunch is maybe there is some CSP policy or some other security requirement that the es-shims polyfill requires, which when hosted my reverse proxy has not provided, and hence it is running and polyfilling when it should not be. Does that sound possible?

[nicolo-ribaudo]

Do they just print Module error above is polyfilled and can be ignored, or do they also actually print an error related to module syntax before that message?

[mangelozzi]

Do they just print Module error above is polyfilled and can be ignored, or do they also actually print an error related to module syntax before that message?

const infoMsg = `Module error above is polyfilled and can be ignored`;

1. When the website is hosted, it logs infoMsg with no errors.
2. When the website is run locally (http://127.0.0.1/) (in the same browser as 1. above), it does not log infoMsg.
3. I think historically ES module shims did not log infoMsg when on a browswer that does not require the shim, however now it runs the polfill regardless. When this behaviour changed I can't say, because the infoMsg is not shown when running locally (dev environment), so it has gone undetected for a while. It appears (due to my subjective perception) the website has a larger FOUC now due to the polyfill running when it should not.

[nicolo-ribaudo]

Do you have a link to the production website?

[mangelozzi]

Do you have a link to the production website?

Thank you for entertaining this issue, for now I don't think it is this projects issue.

Some detail: I see that the difference is when deployed, the minifier (esbuild with --supported:import-assertions=true) is stripping out the with (but not the `assert), hereas a minified import:

`import b from "/static/skin/skin/x-spinner.min.f7632fd3de9c.css";`. 

Tried on a guest tab and get these errors (never saw them because the file was cached):

Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/css". Strict MIME type checking is enforced for module scripts per HTML spec.

So I think I need to first fix the minifying build step (for those with the same problem, please see this thread

Once the minification has been resolved, if it's still an issue I will reopen this issue. Thanks so much for the polyfill, it has been fantastic to be able to use webcomponents in the mean time, cheers!

[mangelozzi]

Okay so I resolved the issue with the minifier, here you can see it not maintains the with{type:"css"};

import k from"/static/skin/skin/x-field.min.css"with{type:"css"};

But I was still having the issue. If it helps anyone else, the fix turned out to be adding blob: to the CSP style-src policy.

[guybedford]

@mangelozzi CSS modules need to still be explicitly enabled for polyfilling via the polyfillEnable feature:

<script type="esms-options">
{
  "polyfillEnable": ["css-modules", "json-modules", "wasm-modules"]
}
</script>

[mangelozzi]

@mangelozzi CSS modules need to still be explicitly enabled for polyfilling via the polyfillEnable feature:

<script type="esms-options">
{
  "polyfillEnable": ["css-modules", "json-modules", "wasm-modules"]
}
</script>

Thanks for the info, I currently have <script>window.esmsInitOptions = { polyfillEnable: ['css-modules'] }</script> but will look into the method above. Thanks so much for the polyfill and the support, I really appreciate it!