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

olivierlacan commented 2 years ago

Getting this with a fresh Rails 7.0.2.3 app with import maps installed in macOS Safari Version 15.1 (17612.2.9.1.20).

For context the exported <script> for import maps:

<script type="importmap" data-turbo-track="reload">{
      "imports": {
        "application": "/assets/application-37f365cbecf1fa2810a8303f4b6571676fa1f9c56c248528bc14ddb857531b95.js",
        "@hotwired/turbo-rails": "/assets/turbo.min-96cbf52c71021ba210235aaeec4720012d2c1df7d2dab3770cfa49eea3bb09da.js",
        "@hotwired/stimulus": "/assets/stimulus.min-900648768bd96f3faeba359cf33c1bd01ca424ca4d2d05f36a5d8345112ae93c.js",
        "@hotwired/stimulus-loading": "/assets/stimulus-loading-1fc59770fb1654500044afd3f5f6d7d00800e5be36746d55b94a2963a7a228aa.js",
        "controllers/application": "/assets/controllers/application-368d98631bccbf2349e0d4f8269afb3fe9625118341966de054759d96ea86c7e.js",
        "controllers/hello_controller": "/assets/controllers/hello_controller-549135e8e7c683a538c3d6d517339ba470fcfb79d62f738a0a089ba41851a554.js",
        "controllers": "/assets/controllers/index-2db729dddcc5b979110e98de4b6720f83f91a123172e87281d5a58410fc43806.js"
      }
    }</script>

Hard to diagnose since it doesn't include any stack traces. Seems potentially related to https://github.com/guybedford/es-module-shims/issues/244 but I wasn't sure whether to escalate quite yet.

Gemfile

gem "importmap-rails"

config/importmap.rb

# Pin npm packages by running ./bin/importmap

pin "application", preload: true
pin "@hotwired/turbo-rails", to: "turbo.min.js", preload: true
pin "@hotwired/stimulus", to: "stimulus.min.js", preload: true
pin "@hotwired/stimulus-loading", to: "stimulus-loading.js", preload: true
pin_all_from "app/javascript/controllers", under: "controllers"

$ bin/importmap json:

$ bin/importmap json
{
  "imports": {
    "application": "/assets/application-37f365cbecf1fa2810a8303f4b6571676fa1f9c56c248528bc14ddb857531b95.js",
    "@hotwired/turbo-rails": "/assets/turbo.min-96cbf52c71021ba210235aaeec4720012d2c1df7d2dab3770cfa49eea3bb09da.js",
    "@hotwired/stimulus": "/assets/stimulus.min-900648768bd96f3faeba359cf33c1bd01ca424ca4d2d05f36a5d8345112ae93c.js",
    "@hotwired/stimulus-loading": "/assets/stimulus-loading-1fc59770fb1654500044afd3f5f6d7d00800e5be36746d55b94a2963a7a228aa.js",
    "controllers/application": "/assets/controllers/application-368d98631bccbf2349e0d4f8269afb3fe9625118341966de054759d96ea86c7e.js",
    "controllers/hello_controller": "/assets/controllers/hello_controller-549135e8e7c683a538c3d6d517339ba470fcfb79d62f738a0a089ba41851a554.js",
    "controllers": "/assets/controllers/index-2db729dddcc5b979110e98de4b6720f83f91a123172e87281d5a58410fc43806.js"
  }
}

app/views/layouts/application.html.erb:

<!DOCTYPE html>
<html>
  <head>
    <title>Example</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
    <%= javascript_importmap_tags %>
  </head>

  <body>
    <main>
      <%= yield %>
    </main>
  </body>
</html>

app/javascript/application.js:

// Configure your import map in config/importmap.rb. Read more: https://github.com/rails/importmap-rails
import "@hotwired/turbo-rails"
import "controllers"

dmcge commented 2 years ago

Expected errors from using the es-module-shim

While import maps are native in Chrome and Edge, they need a shim in other browsers that'll produce a JavaScript console error like TypeError: Module specifier, 'application' does not start with "/", "./", or "../".. This error is normal and does not have any user-facing consequences.

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

In browsers without import maps support, a console error will be given:
Uncaught TypeError: Failed to resolve module specifier "app". Relative references must start with either "/", "./", or "../".
at <anonymous>:1:15
This execution failure is a feature - it avoids the polyfill causing double execution. The first import being a bare specifier in the pattern above is important to ensure this.

This is because the polyfill cannot disable the native loader - instead it will only execute modules that would otherwise fail resolving or parsing to avoid duplicate fetches or executions that would cause performance and reliability issues.

https://github.com/guybedford/es-module-shims#usage

unphased commented 2 years ago

Expected errors from using the es-module-shim

While import maps are native in Chrome and Edge, they need a shim in other browsers that'll produce a JavaScript console error like TypeError: Module specifier, 'application' does not start with "/", "./", or "../".. This error is normal and does not have any user-facing consequences.

https://github.com/rails/importmap-rails#expected-errors-from-using-the-es-module-shim
In browsers without import maps support, a console error will be given:
Uncaught TypeError: Failed to resolve module specifier "app". Relative references must start with either "/", "./", or "../".
at <anonymous>:1:15
This execution failure is a feature - it avoids the polyfill causing double execution. The first import being a bare specifier in the pattern above is important to ensure this. This is because the polyfill cannot disable the native loader - instead it will only execute modules that would otherwise fail resolving or parsing to avoid duplicate fetches or executions that would cause performance and reliability issues.
https://github.com/guybedford/es-module-shims#usage

Hi, sorry for butting into this issue like this, but I need to get to the bottom of a really specific question and this comment by @dmcge is highly relevant.

The behavior described above is completely consistent with what I'm seeing, that is to say:

Safari and Firefox both do need the shim to work, they do work
I don't care about any browsers such as IE 11 that the shim won't work on

The one issue I have is that on Safari, the javascript on the page stops working if its devtools are open. I am concerned that I will never be able to actually debug the app at all under safari. Is this expected behavior? If so, is there any timeline for improving this situation? Or maybe a setting in Safari Devtools to make it not break itself? Or is there something I might be doing wrong in using the shim to make Safari Devtools work again?

I can offer any three.js example page (https://threejs.org/examples/#webgl_animation_keyframes) as a reproduction for this Safari problem. Firefox has no such issue.

---- Update: Actually it seems like potentially all that was happening was that the page's scripting does not start working until you wait a litlte bit if the devtools are open. I guess this whole thing is a false alarm. Sorry.

skd commented 1 year ago

I am following the tutorial. I've reached the chapter, where the tutorial introduces to turbo for a delete method. Turbo did not work (on Firefox) until I've fixed this JavaScript problem.

Like the error asked, I added "./" to all relative imports under javascript directory. Once I've done that, turbo pop up appeared after I clicked on Delete and allowed me to delete the article, like the tutorial expects.

Can you confirm that this is indeed not "user facing"?

skd commented 1 year ago

The offending import is import "controllers". Commenting it out also fixes the problem. Maybe the root problem in my case (creating a project from scratch following the tutorial) is poorly configured controllers javascript package for the default empty project?

shayani commented 1 year ago

The offending import is import "controllers". Commenting it out also fixes the problem. Maybe the root problem in my case (creating a project from scratch following the tutorial) is poorly configured controllers javascript package for the default empty project?

Hi @skd. If removing import "controllers" is a temporary fix, what would be a permanent fix? I'm dealing with the same problem.

gabrieelgomez commented 1 year ago

i have the same issue but with

i only set up my app server with bin/rails server -b 0.0.0.0

TypeError: Module specifier, 'application' does not start with "/", "./", or "../". Referenced from http://192.168.0.122:3000/ es-module-shims.js:34

terryjray commented 1 year ago

I ran into this issue as well, same error. However, I have some custom JS in controllers that I needed so I cannot just comment it out. I moved this line:

pin_all_from "app/javascript/controllers", under: "controllers"

to be the last line in my config/importmap.rb and restarted my bin/dev process and the issue was gone. I don't know if ordering of the pin statements would be important or just making a dummy change to the importmap.rb file and reloading fixed it. But, just wanted to pass that along to anyone running into this problem.

FYI, I'm using Rails 7.0.6 and ruby 3.2.2

raquelhortab commented 11 months ago

why is this issue closed?

ArisNance commented 8 months ago

This issue is still persistent. Anyone have a working solution that they can share? Commenting out import "controllers"; is not an option.

rejeep commented 8 months ago

IIRC I solved this by renaming app/assets/javascripts/application.js to app/assets/javascripts/application-old.js and updating the include:

<%= javascript_include_tag 'application-old' %>

Not the best solution, but the plan is to over time migrate the code in application-old.js elsewhere.

ArisNance commented 8 months ago

@rejeep Thanks, i'll give this a shot

DanielLemky commented 6 months ago

Inserting es-modules-shims before javascript_importmap_tags as mentioned in the importmaps-rails readme resolved this issue for me for legacy browsers

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

See "Supporting legacy browsers such as Safari on iOS 15" here: https://github.com/rails/importmap-rails?tab=readme-ov-file#supporting-legacy-browsers-such-as-safari-on-ios-15

EdgeCaseLord commented 3 months ago

Even with the es-module-shims, my JS still won't load

rails / importmap-rails

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

Expected errors from using the es-module-shim

Expected errors from using the es-module-shim