Javascript 对于基于jquery的库Rails 6 Webpack，获取不是函数错误

我尝试了多种方法让JQuery为datetimepicker（）owlcarousel（）和其他各种基于JQuery的组件等库进行初始化。我不反对将jquery用于语义ui——这很奇怪。但是，JQuery不适用于我在项目中使用的任何其他东西。我目前正在运行Rails 6/ruby 2.6.3。我将列出我的错误/网页包配置如何设置jQuery以在全球范围内工作？

错误

jQuery.Deferred exception: $(...).owlCarousel is not a function TypeError: $(...).owlCarousel is not a function

Application.js

window.jQuery = $;
window.$ = $;
window.moment = moment;
window.ActiveStorageDragAndDrop = ActiveStorageDragAndDrop;


import {} from 'jquery-ujs'
import "./semantic.min"
import "cocoon";
import "./data-confirm-modal-semantic-ui"
import "./jquery.maskMoney"
import "./datepicker.min"
import "./datepicker.en"
import "./trix"
import "./tablesort"
import "./jquery.tagsinput-revisited"
import "@client-side-validations/simple-form"
import * as ActiveStorageDragAndDrop from "active_storage_drag_and_drop"
import moment from 'moment'
import "./jquery.daterangepicker.min"
import "owl.carousel";

require('@client-side-validations/client-side-validations');
require("chartkick");
require("chart.js");
require("@rails/activestorage").start();
require("channels");
require('jquery');

ActiveStorageDragAndDrop.start();

 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/src/jquery', 'window.jQuery': 'jquery/src/jquery',
            moment: 'moment'
        })
    );

    module.exports = environment;

environment.js

window.jQuery = $;
window.$ = $;
window.moment = moment;
window.ActiveStorageDragAndDrop = ActiveStorageDragAndDrop;


import {} from 'jquery-ujs'
import "./semantic.min"
import "cocoon";
import "./data-confirm-modal-semantic-ui"
import "./jquery.maskMoney"
import "./datepicker.min"
import "./datepicker.en"
import "./trix"
import "./tablesort"
import "./jquery.tagsinput-revisited"
import "@client-side-validations/simple-form"
import * as ActiveStorageDragAndDrop from "active_storage_drag_and_drop"
import moment from 'moment'
import "./jquery.daterangepicker.min"
import "owl.carousel";

require('@client-side-validations/client-side-validations');
require("chartkick");
require("chart.js");
require("@rails/activestorage").start();
require("channels");
require('jquery');

ActiveStorageDragAndDrop.start();

 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/src/jquery', 'window.jQuery': 'jquery/src/jquery',
            moment: 'moment'
        })
    );

    module.exports = environment;

package.json

{
  "name": "test_app_sys",
  "private": true,
  "dependencies": {
    "@client-side-validations/client-side-validations": "^0.1.1",
    "@client-side-validations/simple-form": "^0.1.1",
    "@fortawesome/fontawesome-free": "^5.12.1",
    "@rails/actioncable": "^6.0.0-alpha",
    "@rails/activestorage": "^6.0.0-alpha",
    "@rails/webpacker": "^4.0.7",
    "@yaireo/tagify": "yaireo/tagify",
    "active_storage_drag_and_drop": "^0.3.4",
    "chart.js": "^2.9.3",
    "chartkick": "^3.2.0",
    "cocoon": "github:nathanvda/cocoon#c24ba53",
    "flow-webpack-plugin": "^1.2.0",
    "jquery": "^3.4.1",
    "jquery-ujs": "latest",
    "moment": "^2.24.0",
    "owl.carousel": "^2.3.4",
    "stimulus": "^1.1.1"
  },
  "version": "0.1.0",
  "devDependencies": {
    "webpack-dev-server": "^3.9.0"
  }
}

---

您可以在app/javascript/packs/application.js中添加以下内容：

// export jquery to global
var jQuery = require('jquery')
// include jQuery in global and window scope (so you can access it globally)
// in your web browser, when you type $('.div'), it is actually refering to global.$('.div')
global.$ = global.jQuery = jQuery;
window.$ = window.jQuery = jQuery;

我通过这种方式使用Webpacker为Rails 6上的其他Puglin启用jQuery：