[AssetMapper] Import-Polyfill throws error in JS-Console.

[Chris53897]

Symfony version(s) affected

6.4.0

Description

Relates to https://github.com/symfony/symfony/issues/52547

I could not find a way to make the polyfill for importmap work.

I am aware that the behaviour changed between 6.3 and 6.4. https://symfony.com/doc/6.4/frontend/asset_mapper.html#framework-asset-mapper-importmap-polyfill

In 6.3 i used the files from here. // https://ga.jspm.io/npm:es-module-shims@1.8.0/dist/es-module-shims.js // https://ga.jspm.io/npm:es-module-shims@1.8.0/dist/es-module-shims.js.map

These files do not have the problematic last line from the lastest shim. export{t as default}; Is this because of the /+esm

a) No shim: Works

framework:
    asset_mapper:
        importmap_polyfill: false 

b) Per Default (not setting importmap_polyfill) the shim is the 1.8.2 (or actual version) from CDN. https://cdn.jsdelivr.net/npm/es-module-shims@1.8.2/+esm

framework:
    asset_mapper:
        ...

But with this i get this error in the browser js console. es-module-shims.index-e76dd15dae6b25cfe767df2e7fe0ec9e.js:7 Uncaught SyntaxError: Unexpected token 'export' (at es-module-shims.index-e76dd15dae6b25cfe767df2e7fe0ec9e.js:7:33789)

c) Default suggested installation (same result as b) ) php bin/console importmap:require es-module-shims

framework:
    asset_mapper:
        importmap_polyfill: 'es-module-shims'

d) WORKS: Use my local files from Symfony 6.3 and copy them into /assets/lib/es-module-shims/ // https://ga.jspm.io/npm:es-module-shims@1.8.0/dist/es-module-shims.js // https://ga.jspm.io/npm:es-module-shims@1.8.0/dist/es-module-shims.js.map

Run: php bin/console importmap:require "es-module-shims" --path=./assets/lib/es-module-shims/es-module-shims.js

framework:
    asset_mapper:
        importmap_polyfill: 'es-module-shims'

importmap.php

'es-module-shims' => [
        'path' => './assets/lib/es-module-shims/es-module-shims.js',
    ],```

### How to reproduce

See above

### Possible Solution

_No response_

### Additional Context

_No response_

[smnandre]

Could you give the versions of your browser, and of asset-mapper installed ? That could help narrow the problem

[Chris53897]

Chrome 119 Firefox 120

[smnandre]

c) there is a problem there indeed

b), i think you still had a 'es-module-shims' in your importmap.php, because the default URL of the remote polyfill is 1.8.0 in Symfony 6.4

[weaverryan]

Not sure I how missed this.

A) The default config should work. It will load from the same CDN url as 6.3 - https://ga.jspm.io/npm:es-module-shims@1.8.0/dist/es-module-shims.js

B) However, when you importmap:require es-module-shims, the downloaded file has an extra export {t as default};. I knew that was there and was unnecessary, but I thought it was harmless. But I DO see the error. Indeed - it's caused by the /+esm at the end of the URL. This is the ONE special case where we don't want that.

We already have special handling in ImportMapRenderer for es-module-shims. To fix this, I'd recommend one more piece of special code in JsDelivrEsmResolver.

If $packageName === 'es-module-shims then we should use the URL_PATTERN_DIST_CSS (which does not have the /+esm: https://github.com/symfony/symfony/blob/83d0106bdda08479fbaf732965c01b2c3d5d0b82/src/Symfony/Component/AssetMapper/ImportMap/Resolver/JsDelivrEsmResolver.php#L81

(we also have this logic on line 172, so we could isolate it into a private method).

Can someone make a PR?

[hashbanged]

PR #53003 is a shot at it.