importmap-rails: Breaking after upgrade to Chrome 103

I just upgraded to Chrome Version 103.0.5060.53 (Official Build) (arm64) after getting reports from one of my users that my app was having Javascript issues. I wasn’t able to recreate before upgrading.

I’m on importmap-rails 1.1.2 and here’s what I get in the console:

An import map is added after module script load was triggered.
Uncaught TypeError: Failed to resolve module specifier "application". Relative references must start with either "/", "./", or "../".
GET http://0.0.0.0:3000/assets/stimulus.min-900648768bd96f3faeba359cf33c1bd01ca424ca4d2d05f36a5d8345112ae93c.js net::ERR_ABORTED 500 (Internal Server Error)

About this issue

Original URL
State: closed
Created 2 years ago
Reactions: 2
Comments: 18 (6 by maintainers)

Commits related to this issue

Add code to try and reproduce the issue This code is supposed to reproduce [this issue](https://github.com/rails/importmap-rails/issues/137), so I was expecting the stimulus controller to not work. ... — committed to digitalronin/importmap-rails-issue-137 by digitalronin 2 years ago
Add code to try and reproduce the issue This code is supposed to reproduce [this issue](https://github.com/rails/importmap-rails/issues/137), so I was expecting the stimulus controller to not work. ... — committed to digitalronin/importmap-rails-issue-137 by digitalronin 2 years ago
Ensure vim is installed It seems, from [this comment](https://github.com/rails/importmap-rails/issues/137#issuecomment-1193400812) that the rails docker image is not building correctly on windows, al... — committed to digitalronin/importmap-rails-issue-137 by digitalronin 2 years ago

Most upvoted comments

I’m getting the same problem after upgrading Chrome.

Here’s my HTML for the head of the page. The importmap entry is the first script tag.

<!DOCTYPE html>
<html>
  <head>
    <title>Foobar</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta name="csrf-param" content="authenticity_token" />
<meta name="csrf-token" content="ZlXjPy-JUKg1qiX2y4nkr4p_GksQmFAz6DWH5ESHZ1GgW1FH2QhS2KdJphV0ni0tOz-Pj3NiRdnmDKXvDRAwxA" />
    
    <link rel="stylesheet" href="/assets/tailwind-08dd757bf3fc885023bf4d0622a2348730f06279292033e353f85c849810c6a8.css" data-turbo-track="reload" />
<link rel="stylesheet" href="/assets/inter-font-8c3e82affb176f4bca9616b838d906343d1251adc8408efe02cf2b1e4fcf2bc4.css" data-turbo-track="reload" />

    <link rel="stylesheet" href="/assets/application-fe440406e54bdd95ec9046fd7f7b3f6803f9748857226012c8213a74c8350ae1.css" data-turbo-track="reload" />
    <script type="importmap" data-turbo-track="reload">{
  "imports": {
    "application": "/assets/application-37f365cbecf1fa2810a8303f4b6571676fa1f9c56c248528bc14ddb857531b95.js",
    "@hotwired/turbo-rails": "/assets/turbo.min-e5023178542f05fc063cd1dc5865457259cc01f3fba76a28454060d33de6f429.js",
    "@hotwired/stimulus": "/assets/stimulus.min-900648768bd96f3faeba359cf33c1bd01ca424ca4d2d05f36a5d8345112ae93c.js",
    "@hotwired/stimulus-loading": "/assets/stimulus-loading-1fc59770fb1654500044afd3f5f6d7d00800e5be36746d55b94a2963a7a228aa.js",
    "@rails/ujs": "https://ga.jspm.io/npm:@rails/ujs@6.0.5/lib/assets/compiled/rails-ujs.js",
    "controllers/application": "/assets/controllers/application-368d98631bccbf2349e0d4f8269afb3fe9625118341966de054759d96ea86c7e.js",
    "controllers/hello_controller": "/assets/controllers/hello_controller-549135e8e7c683a538c3d6d517339ba470fcfb79d62f738a0a089ba41851a554.js",
    "controllers/home_controller": "/assets/controllers/home_controller-54b5b18fd074d352d1ff5162c0d7ae624247750bb8c5fab21c6fb0802fb56372.js",
    "controllers": "/assets/controllers/index-2db729dddcc5b979110e98de4b6720f83f91a123172e87281d5a58410fc43806.js"
  }
}</script>
<link rel="modulepreload" href="/assets/application-37f365cbecf1fa2810a8303f4b6571676fa1f9c56c248528bc14ddb857531b95.js">
<link rel="modulepreload" href="/assets/turbo.min-e5023178542f05fc063cd1dc5865457259cc01f3fba76a28454060d33de6f429.js">
<link rel="modulepreload" href="/assets/stimulus.min-900648768bd96f3faeba359cf33c1bd01ca424ca4d2d05f36a5d8345112ae93c.js">
<link rel="modulepreload" href="/assets/stimulus-loading-1fc59770fb1654500044afd3f5f6d7d00800e5be36746d55b94a2963a7a228aa.js">
<script src="/assets/es-module-shims.min-b8099fffdbd758070d4801321d43b389c5b6174a50782f9f4cb57061533b7ac2.js" async="async" data-turbo-track="reload"></script>
<script type="module">import "application"</script>
    <script src="/assets/turbo-75fdf390d33bd1a4dcbba67f94d1c3ec9257fc8b8437b17a1999a61a8ebe3718.js" type="module"></script>
    <script src="/vite-dev/@vite/client" type="module"></script>
    <script src="/vite-dev/entrypoints/application.js" crossorigin="anonymous" type="module"></script>
    <!--
      If using a TypeScript entrypoint file:
        vite_typescript_tag 'application'

      If using a .jsx or .tsx entrypoint, add the extension:
        vite_javascript_tag 'application.jsx'

      Visit the guide for more information: https://vite-ruby.netlify.app/guide/rails
    -->

  </head>

digitalronin on Jul 6, 2022

@digitalronin thanks for bringing this thread back into my inbox — I just did some additional digging, and following the deprecation note here: https://rubydoc.info/github/hotwired/turbo-rails/Turbo/IncludesHelper cleared up the problem for me, swapping turbo_include_tags with javascript_include_tag 'turbo', type: 'module-shim' in my layout 🎉

[Edit: This appears to have broken in Firefox now]

woodardj on Sep 10, 2022

I’ve created a repo to demonstrate this problem on a clean rails app. running in a self-contained docker compose environment.

The issue occurs with this commit that adds the <%= turbo_include_tags %> line to the layout.

Without that line, the stimulus controller works fine. Add that line, and this issue appears.

@guybedford Does this help narrow down the problem at all?

digitalronin on Jul 7, 2022