Rails 6中Webpack抛出“Uncaught ReferenceError: $ is not defined”错误

Question

你好，最近我开始使用ruby 2.6.5和Rails 6进行开发。由于Rails 6引入了webpack，因此我正在尝试使用webpack加载我的js文件。虽然我已经在application.js中引用了jquery，但仍然遇到以下错误：

'Uncaught ReferenceError: $ is not defined'

application.js

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

我的'jquery.js'文件在packs目录中。如果我漏掉了什么，请告诉我。提前谢谢 :)

- awsm sid

---

jQuery 是否已定义？只要未使用 noConflict()，$ 是 jQuery 对象的别名。 - charlietfl

我找到了一种方法：window.$ = window.jQuery = require('packs/jquery')。这个方法可行，但现在我又遇到了一个类似的问题：我正在使用masonry.pkgd.min.js，但是出现了“masonry未定义”的错误。你有什么办法来定义它吗？ - awsm sid

你应该在 https://dev59.com/TlMI5IYBdhLWcg3wfbbN#58161486 上进行检查。 - ThienSuBS

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

在 `config/webpack/environment.js` 中删除 `application.js` 中的 `require('packs/jquery')`。

- CR7