Javascript errors after running rails importmap:install on fresh Rails app. #28

tubsandcans · 2021-09-14T16:32:17Z

After adding the importmap-rails gem to a freshly generated Rails app's Gemfile and running rails importmap:install, I'm seeing the following javascript console error messages:

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 "../".

I have tested this with fresh Rails 6.1 and 7.0a apps in Chrome and Safari.

The text was updated successfully, but these errors were encountered:

dhh · 2021-09-14T16:38:40Z

https://github.com/rails/importmap-rails#expected-errors-from-using-the-es-module-shim

dhh · 2021-09-14T16:39:32Z

Oh wait. Seems like there might be something else astray too.

tubsandcans · 2021-09-14T16:59:48Z

Additional info that might be helpful:

An import map is added after module script load was triggered. is only happening on Chrome, and I can't get any Stimulus controllers to connect to the DOM in Chrome. Conversely, in Safari my Stimulus controllers appear to be working.

guybedford · 2021-09-14T17:14:23Z

Import maps have the restriction that if you load any JavaScript module before the import map, then the import map will be blocked.

For example:

<script type="module">
console.log('empty module');
</script>
<script type="importmap">
{ ...importmap }
</script>

will always give this error. It can be fixed by ensuring <script type="importmap"> is never preceded by any <script type="module"> in the HTML of the page.

tubsandcans · 2021-09-14T17:20:39Z

@guybedford thanks for this tip, however in this case there are no other script tags in <head> (or anywhere in the template) since this is a freshly created Rails app.

dhh · 2021-09-16T12:31:29Z

Ah, I take that you didn't start this new app with --skip-javascript? If so, you'll get an app skeleton prepared for Webpacker. That won't work side by side with import map without some manual intervention. This is a known consideration. But we could document that in a section on how to migrate from Webpacker to import maps. Please do have a look at that!

tubsandcans · 2021-09-16T14:50:25Z

I did include the --skip-javascript flag actually. The full command used to generate was:

rails new test-importmap --skip-javascript --skip-bundle --skip-test-unit --database=postgresql

dhh · 2021-09-16T16:07:49Z

--skip-bundle –– did you then run bundle by hand afterwards? I'll try to replicate if so.

dhh · 2021-09-16T16:13:00Z

Just tried to replicate on Rails 6.1.4.1, but couldn't. Steps:

rails new thingy --skip-javascript
cd thingy
bundle add importmap-rails
./bin/rails importmap:install
./bin/rails g controller demo show
./bin/rails server

Then going to /demo/show, I see the correct head, and no errors beyond those expected from the shim:

tubsandcans · 2021-09-16T21:15:40Z

Weird, I'm still getting An import map is added after module script load was triggered under Chrome, and the expected shim error in Safari and Chrome (but I wouldn't expect this in Chrome since I thought import-maps were natively supported?).

Regardless, the behavior that's really affecting me is no Stimulus controllers appear to be working in Chrome under these conditions (after adding hotwire-rails and running hotwire:install).

dhh · 2021-09-17T04:01:26Z

Can you paste the html output you’re seeing?

tubsandcans · 2021-09-17T14:33:59Z

Sure, here it is:


<!DOCTYPE html>
<html>
  <head>
    <title>Thingy</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta name="csrf-param" content="authenticity_token" />
<meta name="csrf-token" content="PvjgMhPEsdTM97UNUITqqnbbW7hSB0drYtX24C_rFZSs7fKHesDPY-6VNV2mFF3KeQQs0OmovDc3kpZJGy8CVg" />
    

    <link rel="stylesheet" media="all" href="/assets/application.debug-b86597dd2a82f7fb1b8407c5cdb60d1ad914d2254e4665efcbe5db03e596bfe7.css" />
    <script type="importmap" data-turbo-track="reload">{
  "imports": {
    "application": "/assets/application-20134a45a847a15caf0ef5b90c1048bc19df6a0079abcca8bc8b3a2bb662bdb8.js",
    "@hotwired/stimulus": "/assets/stimulus-b7b939e6650ecc728406742f2db713cda2d3a88976e2621cf818c8699a413e5d.js",
    "@hotwired/stimulus-importmap-autoloader": "/assets/stimulus-importmap-autoloader-7366d931317007a1e7e62c8dd8198dbc6d6b438207ff8d8539d06019597bf2f7.js",
    "@hotwired/turbo-rails": "/assets/turbo-94dc4be4d3faa69556020cfe3ec669a335da7afc2d6dd761ffff2b6b32ce5507.js",
    "controllers/hello_controller": "/assets/controllers/hello_controller-549135e8e7c683a538c3d6d517339ba470fcfb79d62f738a0a089ba41851a554.js",
    "controllers": "/assets/controllers/index-f6aa019eef4d0e13975a27efdf6d17ba2c6446417bfcb3139efd889f948a5dfc.js",
    "controllers/application": "/assets/controllers/application-0a88d7da94dddbd4b5db3a7e58aba83c761c0de29f578c197e4e41a3a79d014f.js"
  }
}</script>
<link rel="modulepreload" href="/assets/application-20134a45a847a15caf0ef5b90c1048bc19df6a0079abcca8bc8b3a2bb662bdb8.js">
<link rel="modulepreload" href="/assets/stimulus-b7b939e6650ecc728406742f2db713cda2d3a88976e2621cf818c8699a413e5d.js">
<link rel="modulepreload" href="/assets/stimulus-importmap-autoloader-7366d931317007a1e7e62c8dd8198dbc6d6b438207ff8d8539d06019597bf2f7.js">
<link rel="modulepreload" href="/assets/turbo-94dc4be4d3faa69556020cfe3ec669a335da7afc2d6dd761ffff2b6b32ce5507.js">
<link rel="modulepreload" href="/assets/controllers/hello_controller-549135e8e7c683a538c3d6d517339ba470fcfb79d62f738a0a089ba41851a554.js">
<link rel="modulepreload" href="/assets/controllers/index-f6aa019eef4d0e13975a27efdf6d17ba2c6446417bfcb3139efd889f948a5dfc.js">
<link rel="modulepreload" href="/assets/controllers/application-0a88d7da94dddbd4b5db3a7e58aba83c761c0de29f578c197e4e41a3a79d014f.js">
<script src="/assets/es-module-shims.debug-eaf0421d2b783f862221de0cb10abadba2ed1e116184b4fe24fcf2b282913662.js" async="async" data-turbo-track="reload"></script>
<script type="module">import "application"</script>
  </head>

  <body>
    <h1>Demo#show</h1>
<p>Find me in app/views/demo/show.html.erb</p>
<div data-controller="hello"/>

  <script async nonce="" type="text/javascript" id="mini-profiler" src="/mini-profiler-resources/includes.js?v=35a79b300ab5afa978cb59af0b05e059" data-css-url="/mini-profiler-resources/includes.css?v=35a79b300ab5afa978cb59af0b05e059" data-version="35a79b300ab5afa978cb59af0b05e059" data-path="/mini-profiler-resources/" data-current-id="1hmp5yvtmrsew2e8u1hf" data-ids="1hmp5yvtmrsew2e8u1hf,7vgewfujbstoupetfsd2" data-horizontal-position="left" data-vertical-position="top" data-trivial="false" data-children="false" data-max-traces="20" data-controls="false" data-total-sql-count="false" data-authorized="true" data-toggle-shortcut="alt+p" data-start-hidden="false" data-collapse-results="true" data-html-container="body" data-hidden-custom-fields="" data-turbo-permanent="false"></script>
</body>
</html>

dhh · 2021-09-17T14:45:01Z

I think the problem might have been a bad release of turbo-rails-0.7.13. Please try with turbo-rails-0.7.14.

tubsandcans · 2021-09-17T15:07:41Z

I was using turbo-rails 0.7.13, but upgrading to 0.7.14 doesn't appear to change anything, unfortunately.

dhh · 2021-09-17T15:16:03Z

That's mighty odd. I can't replicate this. What version of Chrome are you on?

Can you see if you have the same problem with the Rails 7.0 alpha?

tubsandcans · 2021-09-17T15:29:23Z

The version of Chrome I'm using is 93.0.4577.82.

I tried this with Rails 7alpha2 (and made sure turbo-rails was 0.7.14), but nothing has changed.

dhh · 2021-09-17T15:32:43Z

Possible you have some sort of Chrome plugin that's loading some JS on the page that's not visible in the HTML you pasted? Because as you can see, the error message does not line up with the HTML. The importmap is the first thing loaded, before any js modules.

tubsandcans · 2021-09-17T15:54:38Z

After disabling the Apollo Client Devtools Chrome extension, the Stimulus controllers are working and I'm not seeing any console messages (phew!).

Thanks for helping me out, sorry for wasting your time :)

dhh · 2021-09-17T16:00:12Z

Ha. Damn extensions. No sweat. It's a good point we should actually document on importmap-rails. Please do take a swing at a PR for it!

miharekar · 2021-09-27T06:19:53Z

@tubsandcans omg, thanks so much for figuring this out. I was going crazy why it suddenly stopped working 😒 God damn extensions!

leoplct · 2024-05-15T07:47:07Z

I got the the same issue and it was caused by this chrome extension: Randon User Agent

dhh closed this as completed Sep 14, 2021

dhh reopened this Sep 14, 2021

dhh closed this as completed Sep 16, 2021

itsyoshio mentioned this issue Mar 8, 2022

Failed to resolve module specifier "controllers" only in Prod on Server #110

Closed

woodardj mentioned this issue Jun 29, 2022

Breaking after upgrade to Chrome 103 #137

Closed

purinkle mentioned this issue Jan 25, 2024

Migrate JavaScript to integrate with importmap-rails thoughtbot/administrate#2446

Closed

nickcharlton mentioned this issue Jan 30, 2024

Incompatibility with importmap-rails thoughtbot/administrate#2501

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Javascript errors after running rails importmap:install on fresh Rails app. #28

Javascript errors after running rails importmap:install on fresh Rails app. #28

tubsandcans commented Sep 14, 2021

dhh commented Sep 14, 2021

dhh commented Sep 14, 2021

tubsandcans commented Sep 14, 2021

guybedford commented Sep 14, 2021

tubsandcans commented Sep 14, 2021

dhh commented Sep 16, 2021

tubsandcans commented Sep 16, 2021

dhh commented Sep 16, 2021

dhh commented Sep 16, 2021

tubsandcans commented Sep 16, 2021 •

edited

Loading

dhh commented Sep 17, 2021

tubsandcans commented Sep 17, 2021

dhh commented Sep 17, 2021

tubsandcans commented Sep 17, 2021

dhh commented Sep 17, 2021

tubsandcans commented Sep 17, 2021

dhh commented Sep 17, 2021

tubsandcans commented Sep 17, 2021

dhh commented Sep 17, 2021

miharekar commented Sep 27, 2021

leoplct commented May 15, 2024 •

edited

Loading

Javascript errors after running rails importmap:install on fresh Rails app. #28

Javascript errors after running rails importmap:install on fresh Rails app. #28

Comments

tubsandcans commented Sep 14, 2021

dhh commented Sep 14, 2021

dhh commented Sep 14, 2021

tubsandcans commented Sep 14, 2021

guybedford commented Sep 14, 2021

tubsandcans commented Sep 14, 2021

dhh commented Sep 16, 2021

tubsandcans commented Sep 16, 2021

dhh commented Sep 16, 2021

dhh commented Sep 16, 2021

tubsandcans commented Sep 16, 2021 • edited Loading

dhh commented Sep 17, 2021

tubsandcans commented Sep 17, 2021

dhh commented Sep 17, 2021

tubsandcans commented Sep 17, 2021

dhh commented Sep 17, 2021

tubsandcans commented Sep 17, 2021

dhh commented Sep 17, 2021

tubsandcans commented Sep 17, 2021

dhh commented Sep 17, 2021

miharekar commented Sep 27, 2021

leoplct commented May 15, 2024 • edited Loading

tubsandcans commented Sep 16, 2021 •

edited

Loading

leoplct commented May 15, 2024 •

edited

Loading