TypeError: Module specifier 'application' does not start with '/', './', or '../' in Rails with importmap-rails

I was running into this error on some iOS devices in my Rails application:

TypeError: Module specifier, 'application' does not start with "/", "./", or "../".

application is a bare module specifier. This error means that the browser tried to load it without successfully applying an import map.

In my case, the error occurred on older iOS devices because those versions of Safari did not support import maps natively. Native import-map support begins with Safari and iOS 16.4, so Safari and iOS 16.3 and earlier require a shim.

The same error can also occur when the import-map markup is missing or blocked, module loading begins before the import map is registered, or the import map does not contain a mapping for application. Before assuming browser compatibility is the problem, verify that the page includes javascript_importmap_tags and that application is pinned in the Rails import map.

The fix for older browsers

Insert es-module-shims before javascript_importmap_tags in the application layout:

<script async src="https://ga.jspm.io/npm:[email protected]/dist/es-module-shims.js" data-turbo-track="reload"></script>
<%= javascript_importmap_tags %>

This adds import-map support for older browsers while allowing newer browsers to use their native implementation.

See Supporting legacy browsers such as Safari on iOS 15 in the importmap-rails documentation.