CODEWITHSUNDEEP
jqueryruby-on-railswebpackruby-on-rails-6
alopez02
alopez02

Reputation: 1524

$ is not defined when installing jQuery in Rails via Webpack

I'm trying to install jQuery in Rails 6.0.0.rc1 via Webpack and I'm not sure what I'm missing but I'm getting the error $ is not defined in the browser console despite being able to compile jQuery.

I've added jQuery with yarn add jquery, so my package.json looks like this 

{
  "name": "muladeseis_app",
  "private": true,
  "dependencies": {
    "@babel/preset-react": "^7.0.0",
    "@rails/actioncable": "^6.0.0-alpha",
    "@rails/activestorage": "^6.0.0-alpha",
    "@rails/ujs": "^6.0.0-alpha",
    "@rails/webpacker": "^4.0.2",
    "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
    "jquery": "^3.4.0",
    "prop-types": "^15.7.2",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "turbolinks": "^5.2.0"
  },
  "version": "0.1.0",
  "devDependencies": {
    "webpack-dev-server": "^3.3.1"
  }
}

My app/javascript/packs/application.js is requiring jquery from node_modules

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

And I've tried to register $ in config/webpack/environment.js by doing:

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

const webpack = require('webpack')

module.exports = environment

environment.plugins.append(
    'Provide',
    new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery'
    })
)

Whenever I add a script in my views with a $ reference I get Uncaught ReferenceError: $ is not defined.

I've checked in StackOverflow answers like this to see if I'm registering incorrectly the key character '$' but I've found only answers suggesting using the ProvidePlugin which I'm already referring to in my configuration.

Also if I explore my app Sources in the browser inspector I do see jQuery code integrated in localhost:3000 >> packs/js so the issue is not that Webpack is not finding jQuery but that the key words '$' and 'jQuery' are not recognised.

I'd appreciate your help debugging this.

Upvotes: 23

Views: 11398

Answers (6)

vtamara
vtamara

Reputation: 148

As I explained at https://github.com/rails/webpacker/commit/198a1580c7ec26a24ee81a09404fc173e725f032 and https://github.com/rails/webpacker/issues/3116defe:

  1. Use expose-loader version 3
  2. Prefer the inline version of exposing jQuery with expose-loader (documented at https://webpack.js.org/loaders/expose-loader/#inline) by using import $ from "expose-loader?exposes=$,jQuery!jquery" in app/packs/entrypoints/application.js.
  3. Where you use javascript_pack_tag add defer: false. For example it could be in app/views/layouts/application.html.erb with:
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload',
      defer: false %>```

Upvotes: 1

Mezbah
Mezbah

Reputation: 1267

i was trying to upgrade from rails 4 to rails 6. After few hours of debugging , finally i fixed this jQuery loading error.

So here are the steps, I followed :

  1. add jQuery
yarn add jquery
  1. add expose-loader 
yarn add expose-loader
  1. update config/webpack/environment.js file
const { environment } = require('@rails/webpacker')

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

module.exports = environment
  1. update app/javascript/packs/application.js file
require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")

require("jquery");
  1. restart webpack-dev-server 
bin/webpack-dev-server

Always restart webpack-dev-server, if you update environment.js file.

if you want to use older version of jQuery (Ex: version 2.1.4 )

 yarn add [email protected]

Upvotes: 0

Jimbali
Jimbali

Reputation: 2538

I tried a lot of things and some worked and some didn't, and some didn't work in my Docker container. In the end I settled on putting this in app/javascript/packs/application.js:

global.$ = require('jquery')

You need to do yarn add jquery of course.

I'm sure there are better ways but this is the only thing that worked for me so I'm putting it up here in case it helps anyone else.

Upvotes: 5

Sathish
Sathish

Reputation: 1475

This solution worked for me with Rails 6.0.2.2 and yarn 1.16.0 https://stackoverflow.com/a/54906972/2970582

Upvotes: 2

Andy
Andy

Reputation: 4746

The code in config/webpack/environment.js should look like this:

environment.plugins.prepend('Provide',
  new webpack.ProvidePlugin({
    $: 'jquery/src/jquery',
    jQuery: 'jquery/src/jquery'
  })
)

see also https://www.botreetechnologies.com/blog/introducing-jquery-in-rails-6-using-webpacker

Upvotes: 11

alopez02
alopez02

Reputation: 1524

I've got what's missing.

In app/javascript/packs/application.js forgot to declare:

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

So jQuery keywords could be picked up.

Upvotes: 40

Related Questions