Rails 7 Error: undefined method `javascript_pack_tag' for #<ActionView::Base:0x0000000000c3c8>

I have this on my application.html.erb, I wanted to put the stylesheets and the javascript tag, however, this would throw an error:

I commented it here as this will throw an error. I am currently using the default one:

<%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
<%= javascript_importmap_tags %>

<!DOCTYPE html>
<html>
  <head>
    <title><%= yield(:title) %> | Ruby on Rails Tutorial Sample App</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>
    
    <%# <%= stylesheet_link_tag 'application', media: 'all','data-turbolinks-track': 'reload' %> %>
    <%# <% javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %> %>
    
    <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
    <%= javascript_importmap_tags %>
  </head>
    
  <body>
    <%= yield %>   
  </body>
</html>

Gem file:

# Use JavaScript with ESM import maps [https://github.com/rails/importmap-rails]
gem "importmap-rails"

# Hotwire's SPA-like page accelerator [https://turbo.hotwired.dev]
gem "turbo-rails"

Solution

It seems like you're using import maps for your JavaScript. javascript_pack_tag is a Webpacker-specific method, so unless you're using Webpacker, you can't use it. Seems like you just copy-pasted the javascript_pack_tag and the duplicate stylesheet_link_tag from somewhere else (some older Rails codebase perhaps). Rails 7 changed a lot of things, so those aren't relevant anymore. Also note that those lines are using data-turbolinks-track, which should be replaced with data-turbo-track when using Turbo (instead of the old Turbolinks).

If you started with a basic Rails 7 template, you should probably already have this in your config/importmap.rb. If not, you can add it there to include the application.js file.

pin "application", preload: true

Check the importmap-rails github page for different methods of importing your own JavaScript files and external libraries with import maps. Import maps can be a bit confusing at first, especially since there's not a lot of sources for instructions on how to properly use them (I've mostly relied on their github readme), but I think they're great once you get the hang of it. There are of course other alternatives if you don't want to use import maps, which are laid out pretty nicely by DHH, the creator of Rails, in this blog post.