Rails webpacker jquery undefined `$` undefined

Posted 2023-05-09

【中文标题】Rails webpacker jquery undefined `$` undefined

【英文标题】：

【发布时间】：2021-08-19 20:51:51

【问题描述】：

以下 application.js 包适用于 rails 6.1.3 应用程序

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
//import Rails from "@rails/ujs"
//import Turbolinks from "turbolinks"
//import * as ActiveStorage from "@rails/activestorage"
import "channels"

require('@client-side-validations/client-side-validations')
require("jquery")
require("easy-autocomplete")
require("@zxing/library")
require("foundation-sites")
require("grapheme-splitter")

 import("../src/foundation-datepicker")
 import("../src/promotion_datespan")
 import("../src/sms_counter")
 import("../src/touch_table_highlight")
//Rails.start()
//Turbolinks.start()
//ActiveStorage.start()

正在产生许多问题。最初，很明显 UJS 以某种方式被 import Rails[...] 语法破坏，最后是 start 命令。有趣的是，基础 javascripts 没有运行，但 UJS 问题首先得到了处理。

当前状态似乎表明 jquery 也已损坏（妨碍基础）。单个页面的控制台错误包括：

jQuery is not defined
at Object../node_modules/easy-autocomplete/dist/jquery.easy-autocomplete.js
at __webpack_require__ (bootstrap:63)
at Module../app/javascript/packs/application.js (application.js:16)
at __webpack_require__ (bootstrap:63)
at ./app/javascript/channels sync recursive _channel\.js$.webpackEmptyContext.keys
[...]
[Violation] Forced reflow while executing JavaScript took 46ms

然后，3次：

Uncaught ReferenceError: $ is not defined  

对于页面上的这三个实例：

<%= javascript_tag do %>
document.addEventListener("turbolinks:load", function() 

  $input = $('*[data-behavior="autocomplete"]')
    [...]

<script>
$(function()
    $('#user_date_of_birth').fdatepicker(
    [...]

<script>
  $(document).foundation();

如果问题是正确加载 jquery，如何解决？

【参考方案1】：

您可以在 config/webpack/environment.js 中配置 $ 别名

# config/webpack/environment.js

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

const webpack = require('webpack')
environment.plugins.append('Provide',
    new webpack.ProvidePlugin(
        s: 'jquery',
        $: 'jquery',
        jQuery: 'jquery'
    )
    )

module.exports = environment

【讨论】：

我已经看到了这个解决方案，但它失败了。起作用的是prepend 和$: 'jquery/src/jquery', jQuery: 'jquery/src/jquery' 作为插件变量（2 个这样的变量）。参考：botreetechnologies.com/blog/…