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

Posted 2023-05-09

【中文标题】Uncaught ReferenceError: $ is not defined in Rails 6 jquery webpacker

【英文标题】：

【发布时间】：2020-11-06 19:22:08

【问题描述】：

我正在使用Rails 6.0.3.2、ruby 2.7.1、yarn 1.22.0。

我正在尝试做正常的UJS 事情，这是我得到的错误：

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)

这是我的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"
  

这是我的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

从上面注释掉的代码中可以看出，我也尝试使用 expose-loader per this answer，但这给了我其他错误。

在我的application.js 中，我有以下内容：

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")

我该如何解决这个问题？

【问题讨论】：

jQuery 已导入两次。删除 import '../src/jquery.min' 并在 ujs 之前需要 jQuery。

@RaviTejaGadi 我刚刚尝试过，但并没有解决问题。它确实清理了我的代码，所以我很欣赏这些提示，但它并没有修复错误。

【参考方案1】：

添加以下代码： app/javascript/packs/application.js

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

所以可以选择jQuery关键字。

【讨论】：

所以这是最奇怪的事情。我以前试过这个，但也许我把它放在文件里太高了，因为我又试了一次，它就像一个魅力。谢谢！

这是一个随机的可怕问题，但这解决了它！