Rails webpacker jquery undefined `$` undefined

如何解决Rails webpacker jquery undefined `$` undefined

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

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，如何解决？

解决方法

你可以在 config/webpack/environment.js 配置 $alias

# 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