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

gomo commented 11 months ago

[x] I have tried upgrading by running bundle update vite_ruby.
[x] 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 ├─┬ vite-plugin-ruby@3.2.2 │ └── vite@4.5.0 deduped └── vite@4.5.0 ```

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.

gomo commented 11 months ago

<!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 commented 8 months ago

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

avdept commented 8 months ago

Having same issue on 7.1

owaiswiz commented 8 months ago

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) %>

ElMassimo / vite_ruby