`An import map is added after module script load was triggered` in console. #417

gomo · 2023-11-09T03:06:19Z

I have tried upgrading by running bundle update vite_ruby.
I have read the troubleshooting section before opening an issue.

Description 📖

The following error message appears in the browser 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 "... /".

Reproduction 🐞

Please provide a link to a repo that can reproduce the problem you ran into.

https://github.com/gomo/vite_rails_report

I did this.

rails new .
rails g controller vite index

I wrote gem vite_rails in my Gemfile.

bundle install
bundle exec vite install
bin/vite dev
bundle exec rails s

Open http://localhost:3000/vite/index in your browser.

Vite Ruby Info

Run bin/rake vite:info and provide the output:

bin/vite present?: true
vite_ruby: 3.3.4
vite_rails: 3.0.17
rails: 7.1.1
node: v20.9.0
npm: 10.1.0
yarn: 1.22.19
Volta error: Could not find executable "pnpm"

Use `volta install` to add a package to your toolchain (see `volta help install` for more info).
Error details written to /Users/masamoto/.volta/log/volta-error-2023-11-09_11_42_23.247.log
pnpm: 
ruby: ruby 3.2.0 (2022-12-25 revision a528908271) [arm64-darwin22]

installed packages:
vite_rails_report@ /Users/masamoto/Documents/repos/home/source/sites/vite_rails_report
├─┬ [email protected]
│ └── [email protected] deduped
└── [email protected]

Logs 📜

If not providing a reproduction:

Output

Run DEBUG=vite-plugin-ruby:* bin/vite dev or DEBUG=vite-plugin-ruby:* bin/vite build and provide the output:

  vite-plugin-ruby:config {
  vite-plugin-ruby:config   base: '/vite-dev/',
  vite-plugin-ruby:config   build: {
  vite-plugin-ruby:config     emptyOutDir: true,
  vite-plugin-ruby:config     sourcemap: false,
  vite-plugin-ruby:config     assetsDir: 'assets',
  vite-plugin-ruby:config     manifest: true,
  vite-plugin-ruby:config     outDir: '../../public/vite-dev',
  vite-plugin-ruby:config     rollupOptions: { input: [Object], output: [Object] }
  vite-plugin-ruby:config   },
  vite-plugin-ruby:config   envDir: '/Users/masamoto/Documents/repos/home/source/sites/vite_rails_report',
  vite-plugin-ruby:config   root: '/Users/masamoto/Documents/repos/home/source/sites/vite_rails_report/app/javascript',
  vite-plugin-ruby:config   server: {
  vite-plugin-ruby:config     fs: { allow: [Array], strict: true },
  vite-plugin-ruby:config     host: 'localhost',
  vite-plugin-ruby:config     https: false,
  vite-plugin-ruby:config     port: 3036,
  vite-plugin-ruby:config     strictPort: true,
  vite-plugin-ruby:config     hmr: { clientPort: 3036 }
  vite-plugin-ruby:config   },
  vite-plugin-ruby:config   entrypoints: {
  vite-plugin-ruby:config     'entrypoints/application.js': '/Users/masamoto/Documents/repos/home/source/sites/vite_rails_report/app/javascript/entrypoints/application.js'
  vite-plugin-ruby:config   }
  vite-plugin-ruby:config } +0ms

  VITE v4.5.0  ready in 152 ms

  ➜  Local:   http://localhost:3036/vite-dev/
  ➜  press h to show help

Screenshots 📷

Provide console or browser screenshots of the problem.

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

gomo · 2023-11-09T03:10:51Z

<!DOCTYPE html>
<html>
  <head>
    <title>ViteRailsReport</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 %>
    <%= vite_client_tag %>
    <%= vite_javascript_tag 'application' %>
    <!--
      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>

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

If I remove the javascript_importmap_tags the errors stop appearing and it seems to be working fine, but I am not sure I should remove it as none of the documentation mentions it.

safakferhatkaya · 2024-02-07T08:31:22Z

Any news?
I want to add Vite to an application that already uses importmap and stimulus, do I have to remove importmap?

avdept · 2024-02-07T11:46:29Z

Having same issue on 7.1

owaiswiz · 2024-02-15T16:05:13Z

This happens because when you include scripts from helpers like vite_javascript_tag (or really any module script using rails's javascript_include_tag helper), it will also preload those scripts by using early hints (setting the link header in the response).

When using importmaps, if you're also preloading a module script through the link header (or I'd assume even the link tag if you use it above the importmap definition) is not supported.

To "fix" (taking some perf hit), you can use the option preload_links_header: false when including module scripts, introduced here:

<%=  vite_client_tag(preload_links_header: false) %>
<%=  vite_javascript_tag('application', media: 'all', data: { turbolinks_track: true, turbo_track: 'reload' }, preload_links_header: false) %>

1c7 · 2024-10-23T21:46:29Z

https://vite-ruby.netlify.app/guide/troubleshooting.html

# config/environments/development.rb

Rails.application.configure do
  # Disable `Link: ... rel=preload` header to workaround Safari caching bug
  # https://bugs.webkit.org/show_bug.cgi?id=193533
  config.action_view.preload_links_header = false
end

1c7 · 2024-10-23T21:53:32Z

Background

I am using Ruby on Rails version 7.2 gem 'rails', '~> 7.2.0'
and jsbundling-rails gem 'jsbundling-rails', '~> 1.3', '>= 1.3.1' with esbuild
and Vite Ruby (gem 'vite_rails', '~> 3.0', '>= 3.0.17')
and importmaps gem 'importmap-rails', '~> 2.0', '>= 2.0.3'

I keep seeing error messages in Chrome 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 "../".

This solves the problem

# config/environments/development.rb

Rails.application.configure do
  # Disable `Link: ... rel=preload` header to workaround Safari caching bug
  # https://bugs.webkit.org/show_bug.cgi?id=193533
  config.action_view.preload_links_header = false
end

gomo added the bug: pending triage Something doesn't seem to be working, but hasn't been verified label Nov 9, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

`An import map is added after module script load was triggered` in console. #417

`An import map is added after module script load was triggered` in console. #417

gomo commented Nov 9, 2023 •

edited

Loading

gomo commented Nov 9, 2023 •

edited

Loading

safakferhatkaya commented Feb 7, 2024

avdept commented Feb 7, 2024

owaiswiz commented Feb 15, 2024

1c7 commented Oct 23, 2024

1c7 commented Oct 23, 2024 •

edited

Loading

An import map is added after module script load was triggered in console. #417

An import map is added after module script load was triggered in console. #417

Comments

gomo commented Nov 9, 2023 • edited Loading

Description 📖

Reproduction 🐞

Logs 📜

Screenshots 📷

gomo commented Nov 9, 2023 • edited Loading

safakferhatkaya commented Feb 7, 2024

avdept commented Feb 7, 2024

owaiswiz commented Feb 15, 2024

1c7 commented Oct 23, 2024

https://vite-ruby.netlify.app/guide/troubleshooting.html

1c7 commented Oct 23, 2024 • edited Loading

Background

I keep seeing error messages in Chrome Console

This solves the problem

`An import map is added after module script load was triggered` in console. #417

`An import map is added after module script load was triggered` in console. #417

gomo commented Nov 9, 2023 •

edited

Loading

gomo commented Nov 9, 2023 •

edited

Loading

1c7 commented Oct 23, 2024 •

edited

Loading