CODEWITHSUNDEEP
javascriptruby-on-rails
Alfredo
Alfredo

Reputation: 136

An import map is added after module script load was triggered

I have a Rails app, and my custom javascript doesn't work. In Chrome console I can see the following errors:

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

Uncaught TypeError: Failed to resolve module specifier "@hotwired/turbo-rails". Relative references must start with either "/", "./", or "../".

I cannot uderstand why there are these errors, I moved the importmap before the script with type module, but I'm still getting this error. In my application.html.erb I have

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

<%= stylesheet_link_tag "application", media: "all", "data-turbolinks-track" => true %>
<%= javascript_importmap_tags %>
<%= javascript_include_tag "application", "data-turbolinks-track" => true, type: "module" %>

This is my importmap.rb file:

# 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"

This is my app/javascript/application.js file:

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

This is the app/javascript/cotrollers/application.js

import { Application } from "@hotwired/stimulus"

const application = Application.start()

// Configure Stimulus development experience
application.debug = false
window.Stimulus   = application

export { application }

This is the content of the app/assets/javascripts/application.js

//= require jquery
//= require jquery_ujs
//= require twitter/bootstrap
//= require_tree .

And I cannot see the custom javascript in the app/assets/javascripts/ folder. What am I missing? thanks

Upvotes: 5

Views: 1554

Answers (1)

Irina Lindt
Irina Lindt

Reputation: 41

I had the same issue when I had leftover <%= javascript_include_tag("turbo", type: "module") %> directives in my code.

Upvotes: 0

Related Questions