vite_ruby
vite_ruby copied to clipboard
ElMassimo
`An import map is added after module script load was triggered` in console.
- [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
├─┬ [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.
<!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.
Any news? I want to add Vite to an application that already uses importmap and stimulus, do I have to remove importmap?
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) %>
