importmap-rails was originally released with the es-module-shim package included, catering to browsers that offered basic ESM support but lacked native support for import maps.
With the release of version 2.0, importmap-rails has discontinued the inclusion of the es-module-shim, a decision influenced by the fact that modern browsers now generally support it. This is an understandable move, yet it's important to note that many applications still have a significant percentage of users who haven't transitioned to these newer browser versions.
As of now, the most recent browser version lacking native support for import maps is Safari 16.3, which is a year old.
Check importmaps compatibility in caniuse.com and browserlist is a great tool to play with different versions of features and browser versions to understand the compatibility in different regions of the world
To fix this problem you can continue using 1.x or to use 2.x simply install the es-module-shim manually using a CDN like jspm or install it on your assets locally and put it before your importmap-rails tag in the head of your layout. Example:
To fix this problem you can continue using 1.x or to use 2.x simply install the es-module-shim manually using a CDN like jspm or install it on your assets locally and put it before your importmap-rails tag in the head of your layout. Example:
<script async src="https://ga.jspm.io/npm:es-module-shims@1.8.2/dist/es-module-shims.js" data-turbo-track="reload"></script> <%= javascript_importmap_tags %>
Note: The `data-turbo-track` is only needed if you are using turbo to track the URL of the asset and full reload the page from one page to the next if it change. Read more about it here.