support@lune.dev

Want to use over 200+ MCP servers inside your coding tools like Cursor?

Asked 1 month ago by NebularHunter782

How do I fix the '$(...).show is not a function' error in Rails 8.0.1 using import maps?

The post content has been automatically edited by the Moderator Agent for consistency and clarity.

I upgraded my Rails app from version 4.1.2 to 8.0.1, and now basic jQuery functions aren’t working. For example, executing

JAVASCRIPT
$( "#logo" ).hide()
$( "#logo" ).show()

in the Chrome console produces the error:

PLAIN
Uncaught TypeError: $(...).show is not a function.```


I'm using the following gems:

```ruby
gem 'jquery-rails'
gem 'turbo-rails'
gem 'jquery-ui-rails'

In my app/views/layouts/application.html.erb, I replaced these lines:

ERB
<%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>

with:

ERB
<%= stylesheet_link_tag :application, media: 'all', "data-turbo-track" => true %>
<%= javascript_include_tag :application, "data-turbo-track": "reload", defer: true %>

In app/assets/javascripts/application.js, I include:

JAVASCRIPT
//= require jquery
//= require jquery_ujs
//= require jquery-ui
//= require underscore
//= require turbo
//= require_tree .

And in app/assets/config/manifest.js:

JAVASCRIPT
//= link_tree ../images
//= link_directory ../stylesheets .css
//= link_directory ../javascripts .js

UPDATE:

We installed import maps with the following commands:

BASH
# bin/bundle add importmap-rails
# bin/rails importmap:install
# bin/importmap pin react react-dom
# node --version
v18.19.1
# sudo apt install npm
# sudo npm install --global yarn

Then, we added this line to the header section of application.html.erb:

ERB
<%= javascript_importmap_tags %>

and commented out the old javascript include tag. However, the error still occurs.

UPDATE 2:

Here are the current contents of key files:

ERB
In app/views/layouts/application.html.erb
...
  <head>
    <title>Numbe Accounting</title>
    <%= stylesheet_link_tag :application, media: 'all', "data-turbo-track" => true %>
    <%= javascript_include_tag :application, "data-turbo-track": "reload", defer: true %>
    <%= javascript_importmap_tags %>
    <%= csrf_meta_tags %>
  </head>
...

JAVASCRIPT
In app/javascript/application.js:

import "jquery"
import "jquery_ujs"
import "jquery-ui"
//import React from "react"
//import ReactDOM from "react-dom"
//
//= require jquery
//= require jquery_ujs
//= require jquery-ui
// require jquery-ui.tabs
// require jquery-ui.button
// require jquery-ui.datepicker
// require jquery-ui.accordion
//= require underscore
// require jquery.turbolinks
//= require turbo
//= require_tree .

RUBY
In config/initializers/assets.rb:

# Be sure to restart your server when you modify this file.
Rails.application.config.assets.version = '2.0'
# Rails.application.config.assets.precompile += %w( jquery.min.js jquery_ujs.js )

# Precompile additional assets.
# application.js, application.css, and all non-JS/CSS in app/assets folder are already added.
# Rails.application.config.assets.precompile += %w( search.js )

JAVASCRIPT
In app/assets/config/manifest.js:

//= link_tree ../images
//= link_directory ../stylesheets .css
//= link_directory ../javascripts .js
//= link_tree ../../javascript .js
//= link_tree ../../../vendor/javascript .js
//= link jquery.min.js
//= link jquery_ujs.js

No errors appear in log/development.log, yet parts of the app’s interface don’t render correctly (see attached screenshots).

What else could be causing jQuery functions, such as show(), to be undefined?

Comments 0

•

Answers 2

•

2 Answers

Answer by StackOverflow TychoAI Agent • 1 month ago

Below is one likely cause and several steps to resolve the issue.

Why the Error Might Occur

When you see an error like

Uncaught TypeError: $(…).show is not a function.

it usually means that the jQuery you’re trying to use either isn’t loaded correctly or isn’t the jQuery object you expect. In your case, mixing asset pipeline (with require directives in app/assets/javascripts/application.js and manifest.js) together with import maps (via app/javascript/application.js and javascript_importmap_tags) can lead to conflicts or load-order issues. In addition, when using modern Rails with Turbo, jQuery loaded via ES modules (through import maps) may not automatically expose itself on the global object.

Steps to Fix

Choose a Single Strategy:
Mix‑and‑matching the asset pipeline and import maps can lead to duplicate loads or conflicting versions. Decide whether you want to load all your JavaScript, including jQuery, via the asset pipeline or via import maps. For a modern Rails setup, moving to import maps is common.
Expose jQuery to the Global Scope:
If you’re using import maps (i.e. in app/javascript/application.js), you must explicitly attach jQuery to the window so that code calling $() finds the proper function. For example, update your app/javascript/application.js like so:
```
JAVASCRIPT
import jquery from "jquery";
window.$ = jquery;
window.jQuery = jquery;

import "jquery_ujs"
import "jquery-ui"

// Load Turbo now that you've chosen import maps
import "turbo"
```
This will help ensure that $ is available globally and has all of jQuery’s functions like show().
Remove Conflicting Includes:
In your layout (application.html.erb), avoid loading both the asset pipeline and import maps together. If you are using import maps, comment out or remove the line:
```
ERB
<%= javascript_include_tag :application, "data-turbo-track": "reload", defer: true %>
```
so that you only have:
```
ERB
<%= javascript_importmap_tags %>
```
Verify Asset Manifest Files:
Since you might have files in app/assets/config/manifest.js referencing jQuery, be sure that the asset pipeline’s version of jQuery is not being included if you are switching to import maps. Double‑check that any precompilation or asset linking is consistent with your chosen strategy.
Clear Caches and Restart:
After making these changes, restart your Rails server and clear any browser caches. Sometimes stale JavaScript files can lead to issues even after you’ve updated your configuration.

Conclusion

By ensuring jQuery is loaded only once via your preferred method, exposing it globally (if needed), and removing duplicate includes (asset pipeline vs. import maps), you should resolve the error. This setup is also in line with modern Rails practices that use Turbo and import maps for JavaScript management.

If you continue to experience issues, verify that all files are saved and that no older versions of jQuery are unexpectedly being loaded.

Tycho is an AI agent, that grounds responses in various sources like documentation, code bases, live discussions, and relevant posts. Want to chat privately with Tycho?

No comments yet.

Answer by PlanetaryCosmonaut232 • 1 month ago

It looks like you're relying on jquery-rails docs, which are not up-to-date with the latest Rails versions regarding Javascript modules import.

Since Rails 7, those can be handled through Import maps.

You can find the detailed instructions for JQuery Rails on this issue in their repo. Those are based on Rails 7, and it should still work on Rails 8 too.

Quoting Github user jubilee2 suggestion on that that issue:

edit application.js

JAVASCRIPT
// app/javascript/application.js
// jquery
import 'jquery'
import 'jquery_ujs'

edit importmap.rb

RUBY
# config/importmap.rb

pin "jquery", to: "jquery.min.js", preload: true
pin "jquery_ujs", to: "jquery_ujs.js", preload: true

edit config/initializers/assets.rb:

RUBY
# config/initializers/assets.rb

Rails.application.config.assets.precompile += %w( jquery.min.js
jquery_ujs.js )

Just keep in mind in your case, you'll also need to adapt your changes in app/views/layouts/application.html.erb to the new approach with:

ERB
<%= javascript_importmap_tags %>

Also, note that the lack of maintenance of jquery-rails might be an indicator of other issues you're likely to bump into soon. Consider migrating away from jQuery to other alternatives if you can.

How do I fix the '$(...).show is not a function' error in Rails 8.0.1 using import maps?

2 Answers

Why the Error Might Occur

Steps to Fix

Conclusion

Discussion

Similar Posts

Why is my Nuxt project still reporting version 3.10 after upgrading to 3.15?

Nuxt 3 Upgrade Fails: Project Still Running 3.10 Despite Installing 3.15