Hi i recently started working on Rails 6 with ruby 2.6.5. as the rails 6 has introduced the webpacks so i am trying to load my js files with the webpack. Although i have already required the jquery in the appliation.js still i am getting the below error:

'Uncaught ReferenceError: $ is not defined'

application.js

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

My 'jquery.js' file is inside the packs directory. Please let me know if i am missing something. Thanks in advance :)

Hi i recently started working on Rails 6 with ruby 2.6.5. as the rails 6 has introduced the webpacks so i am trying to load my js files with the webpack. Although i have already required the jquery in the appliation.js still i am getting the below error:

'Uncaught ReferenceError: $ is not defined'

application.js

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

My 'jquery.js' file is inside the packs directory. Please let me know if i am missing something. Thanks in advance :)

• javascript
• jquery
• ruby-on-rails
• webpack
• ruby-on-rails-6

• Is jQuery defined? $ is an alias for jQuery object so long as noConflict() hasn't been used – charlietfl Commented Nov 3, 2019 at 3:49
• 1 i found a way window.$ = window.jQuery = require('packs/jquery') this is working but now i have another similar problem i am using masonry.pkgd.min.js now i am getting masonry is not defined. do you have any clue how to define it? – awsm sid Commented Nov 3, 2019 at 4:32
• You should check it at stackoverflow./a/58161486/4631412 – ThienSuBS Commented Feb 28, 2020 at 7:55

1 Answer 1

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

const webpack = require('webpack')
environment.plugins.prepend('Provide', new webpack.ProvidePlugin({
  $: 'jquery/src/jquery',
  jQuery: 'jquery/src/jquery',
  jquery: 'jquery',
  'window.jQuery': 'jquery',
  Popper: ['popper.js', 'default']
}))

module.exports = environment

In config/webpack/environment.js and delete require('packs/jquery') in application.js