将 stimulus 和 importmaps 添加到现有的 Rails 6.1 应用程序

Question

I've got a Rails 6.1 app which has been upgraded from Rails 4 -> 5 -> 6, so it's mature.

It still uses asset pipeline and with the future of Rails 7.0 I'm going to keep it that way. I wanted to start using stimulus + importmaps , so I've followed along with the install.

After installing importmaps and stimulus through hotwire I'm getting the following errors in Firefox 91 when loading my app;

Uncaught SyntaxError: import declarations may only appear at top level of a module
Uncaught TypeError: Error resolving module specifier “application”. Relative module specifiers must start with “./”, “../” or “/”.

My importmap.rb

Rails.application.config.importmap.draw do
  pin "@hotwired/stimulus", to: "stimulus.js"
  pin "@hotwired/stimulus-importmap-autoloader", to: "stimulus-importmap-autoloader.js"
  pin_all_from "app/javascript/controllers", under: "controllers"

  pin "application"

  # Use libraries available via the asset pipeline (locally or via gems). # Rails 7.0 required
  # pin "@rails/actioncable", to: "actioncable.esm.js"     
  # pin "@rails/activestorage", to: "activestorage.esm.js" 

  # Use libraries directly from JavaScript CDNs (see https://www.skypack.dev, https://esm.sh, https://www.jsdelivr.com/esm)
  # pin "vue", to: "https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.esm.browser.js"
  # pin "d3", to: "https://esm.sh/d3?bundle"

  # Pin vendored modules by first adding the following to app/assets/config/manifest.js:
  # //= link_tree ../../../vendor/assets/javascripts .js
  # pin_all_from "vendor/assets/javascripts"
end

I've kept all my javascript in app/assets/javascripts directory which should still be handled by the asset pipeline.

I've got the following app/assets/javascripts/importmap.json.erb

{
  "imports": { 
    "turbo": "<%= asset_path "turbo" %>",
    <%= importmap_list_with_stimulus_from "app/assets/javascripts/controllers", "app/assets/javascripts/libraries" %>
  }
}

application.js is;

// This is the main application.js, there can only be one.
//
// Configure your import map in config/importmap.rb

// import "@rails/actioncable"   // Rails 7.0 required
// import "@rails/activestorage" // Rails 7.0 required

import "@hotwired/stimulus-importmap-autoloader"

I also have the following line in my application.html.erb

<%= stylesheet_link_tag    "application" %>
<%= javascript_include_tag "application" %>
<%= csrf_meta_tags %>
<%= javascript_include_tag "turbo", type: "module-shim" %>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<%= yield :head %>
<%= javascript_importmap_tags %>

manifest.js is;

//= link_tree ../images
//= link_directory ../javascripts .js
//= link_directory ../stylesheets .css
//= link_tree ../javascripts

Edit

Checking the Elements tab in Chrome and I've already loaded es-module-shims but in Firefox I still get the errors;

Uncaught SyntaxError: import declarations may only appear at top level of a module
Uncaught TypeError: Error resolving module specifier “application”. Relative module specifiers must start with “./”, “../” or “/”.

Here is the code which loads the es-module-shim

<script src="/assets/es-module-shims-e320a414bc4656be79c9c722c91afd9bc40140edf48616fbf72fb2da3c1fdcaa.js" async="async" data-turbo-track="reload"></script>
<script type="module">import "application"</script>

Edit

The following error can be safely ignored;

Uncaught TypeError: Error resolving module specifier “application”. Relative module specifiers must start with “./”, “../” or “/”.

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

Edit

The other error disappeared when I changed my application.html.erb head to the following

<%= csrf_meta_tags %>
<%= csp_meta_tag %>

<%= stylesheet_link_tag    "application" %>
<%= javascript_importmap_tags %>

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<%= yield :head %>

Answer 1

Firefox does not support importmaps natively. You need to add a polyfill from https://github.com/guybedford/es-module-shims .