TypeError: Importmap issue in safari

Sis Ccr
1 min readFeb 7, 2024

I had strange issue. I have a basic rails 7 app, using default importmap. I had small stimulus controller that basicaly changed the text of the link_to tag when the page is loaded.

All was working fine in chrome. But as I tested it on safari, it does not work. and there is strange error in console

TypeError: Module specifier, 'application' does not start with "/", "./", or "../". Referenced from http://localhost:3000/So the root problem turns out to be safari version. I am using importmap-rails version  (2.0.1), and safari version was 16.3. I found out that

Importmaps 2.x are only supported from Safari 16.4 onwart.

so either I

  1. downgrade the importmap to vs 1.x or
  2. update safari (i.e mac os ) or
  3. include the es-module-shims myself (importmap-rails 1.x includes the shim, 2.x dropped it)

I looked at es-module-shims github page

and implemented following script.

    <script async src="https://ga.jspm.io/npm:es-module-shims@1.8.2/dist/es-module-shims.js"></script>
<script type="importmap">
{
"imports": {
"react": "https://ga.jspm.io/npm:react@18.0.0-rc.0/index.js"
},
"scopes": {
"https://ga.jspm.io/npm:react@18.0.0-rc.0/": {
"object-assign": "https://ga.jspm.io/npm:object-assign@4.1.1/index.js"
}
}
}
</script>
</body>
</html>

and then the error is still there, but the stimulus controller is now working fine.

--

--