1

I've been working on migrating a legacy Rails app to using webpacker in Rails 6.0.2, but keep coming across an Uncaught ReferenceError: jQuery is not defined error. This same error appears even in a fresh Rails 6 app that I create.

I've followed plenty of different tutorials / StackOverflow answers, but nothing seems to be working. Here's what I currently have - can anyone please point me in the right direction?

I've run yarn add jquery so this is in my package.json file:

{
  "name": "test_app",
  "private": true,
  "dependencies": {
    "@rails/actioncable": "^6.0.0",
    "@rails/activestorage": "^6.0.0",
    "@rails/ujs": "^6.0.0",
    "@rails/webpacker": "4.2.2",
    "bootstrap": "^4.4.1",
    "jquery": "^3.5.0",
    "popper.js": "^1.16.1",
    "turbolinks": "^5.2.0"
  },
  "version": "0.1.0",
  "devDependencies": {
    "webpack-dev-server": "^3.10.3"
  }
}

In my application.js file:

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require("jquery") // I've also tried without this line.
require("bootstrap");

And in my environment.js file:

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

environment.plugins.append('Provide', new webpack.ProvidePlugin({
  $: 'jquery/src/jquery', // I've also tried with just 'jquery' rather than referring specifically to the src folder.
  jQuery: 'jquery/src/jquery' // Same comment as above.
}));

module.exports = environment

I'm pretty baffled as to why it's not working - I've tried the solutions suggested here, as well as a multitude of other resources. Any help would be greatly appreciated!

Jinx
  • 100
  • 1
  • 9
  • Can you determine where this error is originating from? i.e., from an imported library, your application code under `app/javascript/`, or in a ` – rossta Apr 19 '20 at 14:19
  • Hi @rossta, thanks for replying! So no jquery is working at all - not scripts that I've saved under `app/javascript/src`, not jQuery directly saved in my html.erb files, and not running `$ === jQuery` in Chrome console (which I'm told will return true if jQuery is loaded). All result in `Uncaught ReferenceError: jQuery is not defined` or `Uncaught ReferenceError: $ is not defined`. – Jinx Apr 21 '20 at 10:15
  • It definitely won't work outside of Webpacker (e.g. in templates and partials) without exposing jQuery/$ to the global scope. I'd expect it to work within `app/javascript/src` so if it isn't, you'll need to show example code. – rossta Apr 21 '20 at 13:47
  • This all looks good. Have to tried restarting the server and hard reload? – Shishir May 18 '20 at 08:43

2 Answers2

1

Not sure if this will do it for you but I had to move the require("jquery") line to the top of my application.js file.

Another thing to make sure of, is that you are using the below tag on your layout. <%= javascript_pack_tag 'application' %>

Scott
  • 15
  • 1
  • 6
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 issue

Ben
  • 13,297
  • 4
  • 47
  • 68