Rails 6 + Webpacker：未捕获的类型错误：$(...).select2 不是函数

如何解决Rails 6 + Webpacker：未捕获的类型错误：$(...).select2 不是函数

我正在尝试让 select2 在我的应用中运行，但无法运行。我是通过 yarn add select2 添加的。下面是我的代码

javascript/packs/application.js

// This file is automatically compiled by Webpack,along with any other files
// present in this directory. You're encouraged to place your actual application logic in
// a relevant structure within app/javascript and only use these pack files to reference
// that code so it'll be compiled.

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require("jquery")
require("bootstrap")
require("tempusdominus-bootstrap-4")
require("moment/locale/ja")
require('select2')


// stylesheets
require("../stylesheets/application.scss")

import "@fortawesome/fontawesome-free/css/all.css";
import "./owl.carousel.min.js";
import 'select2';
import 'select2/dist/css/select2.css';

$(document).ready(function(){ 
    $('.customers-dropdown').select2();
    $("select").change(function(event) {
        $("#extra_price").html(formatCurrency($("#extra_" + $(".select").val()).html()));
        computetotal(event); 
    });

    $('#inlineDatepicker').datetimepicker({
        inline: true,sideBySide: false,format: 'L',useCurrent: false,defaultDate: $('#weekStardate').val(),});

    $("#inlineDatepicker").on("change.datetimepicker",({date,oldDate}) => {   
        var fdate = moment(date)        
        $('#weekStardate').val(fdate.format("D/M/YYYY")) 
     })
        
}); 

package.json

{
  "name": "rails_6_devise_example","private": true,"dependencies": {
    "@fortawesome/fontawesome-free": "^5.14.0","@rails/actioncable": "^6.0.0-alpha","@rails/activestorage": "^6.0.0-alpha","@rails/ujs": "^6.0.0-alpha","@rails/webpacker": "^5.2.1","bootstrap": "^4.5.2","bootstrap-datepicker": "^1.9.0","jquery": "^3.5.1","moment": "^2.27.0","node-sass": "^4.12","popper.js": "^1.16.1","rails-ujs": "^5.2.4-3","select2": "^4.1.0-rc.0","tempusdominus-bootstrap-4": "^5.1.2","turbolinks": "^5.2.0"
  },"version": "0.1.0","devDependencies": {
    "webpack-dev-server": "^3.8.1"
  }
}

我得到 Uncaught TypeError: $(...).select2 is not a function。我查看了很多帖子，并按照建议，我尝试在 import $ from 'jquery'; 上方添加 import 'select2';知道发生了什么。

非常感谢任何帮助，谢谢！

解决方法

我很快准备了代码，它运行良好。我刚刚将其添加到插件中：

new webpack.ProvidePlugin({
  $: 'jquery',jQuery: 'jquery','window.jQuery': 'jquery',moment: 'moment'
})

我也改变了顺序，因为这正是 turbolink 想要的 ;)

require("jquery")
require("bootstrap")
require("tempusdominus-bootstrap-4")
require("moment/locale/ja")
require("turbolinks").start()
require('select2')

当然有一些错误，但我想念 formatCurrency 但最重要的事情是有效的 :)