Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
2 tasks done
gomo opened this issue Nov 9, 2023 · 4 comments
Open
2 tasks done

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

gomo opened this issue Nov 9, 2023 · 4 comments
Labels
bug: pending triage Something doesn't seem to be working, but hasn't been verified

Comments

@gomo
Copy link

gomo commented Nov 9, 2023 •
edited

  • 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
├─┬ 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.

Screenshot 2023-11-09 at 11 41 27
@gomo gomo added the bug: pending triage Something doesn't seem to be working, but hasn't been verified label Nov 9, 2023
@gomo
Copy link
Author

gomo commented Nov 9, 2023 •
edited 

<!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
Copy link

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

@avdept
Copy link

avdept commented Feb 7, 2024

Having same issue on 7.1

@owaiswiz
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug: pending triage Something doesn't seem to be working, but hasn't been verified
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@gomo @avdept @owaiswiz @safakferhatkaya