Uncaught ReferenceError: $ is not defined in Rails 6 jquery webpacker

Question

I am using Rails 6.0.3.2, ruby 2.7.1, yarn 1.22.0.

I am trying to do normal UJS stuff, and this is the error I am getting:

VM125:1 Uncaught ReferenceError: $ is not defined
    at <anonymous>:1:1
    at processResponse (rails-ujs.js:283)
    at rails-ujs.js:196
    at XMLHttpRequest.xhr.onreadystatechange (rails-ujs.js:264)

This is my package.json:

{
  "name": "myapp",
  "private": true,
  "dependencies": {
    "@rails/actioncable": "^6.0.0",
    "@rails/actiontext": "^6.0.2-2",
    "@rails/activestorage": "^6.0.0",
    "@rails/ujs": "^6.0.0",
    "@rails/webpacker": "4.2.2",
    "bootstrap": "^4.4.1",
    "data-confirm-modal": "^1.6.2",
    "expose-loader": "^1.0.0",
    "flickity": "^2.2.1",
    "jquery": "3.4.1",
    "local-time": "^2.1.0",
    "popper.js": "^1.16.1",
    "stimulus": "^1.1.1",
    "trix": "^1.0.0",
    "turbolinks": "^5.2.0"
  },
  "version": "0.1.0",
  "devDependencies": {
    "webpack-dev-server": "^3.10.3"
  }
}

This is my environment.js:

const { environment } = require('@rails/webpacker')

const webpack = require('webpack')
environment.plugins.append('Provide', new webpack.ProvidePlugin({
  $: 'jquery',
  jQuery: 'jquery',
  Rails: '@rails/ujs'
}))

// environment.loaders.append('jquery', {
//     test: require.resolve('jquery'),
//     use: [{
//         loader: 'expose-loader',
//         options: '$',
//     }, {
//         loader: 'expose-loader',
//         options: 'jQuery',
//     }],
// });

module.exports = environment

As you can see from the commented out code above, I also tried using expose-loader per this answer but that gave me other errors.

In my application.js, I have the following:

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require("local-time").start()
require("jquery")

import '../src/jquery.min'
.
.
.
import "controllers"

require("trix")
require("@rails/actiontext")

How do I fix this?

jQuery has been imported twice. Remove import '../src/jquery.min' and require jQuery before ujs. — Ravi Teja Gadi
– Ravi Teja Gadi, Commented Jul 17, 2020 at 3:07
@RaviTejaGadi I just tried that and it didn't fix the issue. It does clean up my code, so I appreciate the tips, but it didn't fix the error. — marcamillion
– marcamillion, Commented Jul 17, 2020 at 3:29

code_aks · Accepted Answer · 2020-07-17 04:11:47Z

8

Add below code in : app/javascript/packs/application.js

window.jQuery = $;
window.$ = $;

So jQuery keywords could be picked up.

answered Jul 17, 2020 at 4:11

code_aks

2,0742 gold badges16 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

marcamillion Over a year ago

So this is the weirdest thing. I tried this before, but perhaps I had put it too high in the file, cuz I just tried it again and it works like a charm. Thanks!

Liz Over a year ago

This is such a random horrible issue, but this fixed it!

Ben · Accepted Answer · 2023-01-02 10:01:28Z

0

I had a lot of issues migrating from webpacker 5 to shakapacker. Adding

import "expose-loader?exposes=$,jQuery!jquery"

To the top of application.js fixed the jQuery issues

answered Jan 2, 2023 at 10:01

Ben

13.7k4 gold badges51 silver badges70 bronze badges

Collectives™ on Stack Overflow

Uncaught ReferenceError: $ is not defined in Rails 6 jquery webpacker

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related