Rails 6 Web Packer - 添加引导模板 “未捕获的类型错误：$(...).dateRangePicker 不是函数”的问题

问题描述

我正在尽我最大的努力用 Rails 6 来分解 Webpacker。我在这里学习了一个教程，该教程描述了如何最好地将引导主题添加到新的 Rails 6 项目中。通过纱线添加 js 库时一切正常。然后，我通过在 javascripts 中创建供应商文件夹并使用导入调用它来添加 datepicker-category.js 文件。

关于编译，一切看起来都还可以。当我将新的 js 文件添加到供应商文件夹中时，我的浏览器控制台中出现了一些错误。由于这是一个全新的 Rails 6 应用程序，具有非常简单的 webpack 配置，我希望有人能阐明我有限的前端/jQuery 知识。

我正在关注的在线教程：here。

因此创建了 Rails 6 应用程序。带有索引视图的页面控制器。就是这样。

Package.json

{
  "name": "tourIoUsity","private": true,"dependencies": {
    "@popperjs/core": "^2.6.0","@rails/actioncable": "^6.0.0","@rails/activestorage": "^6.0.0","@rails/ujs": "^6.0.0","@rails/webpacker": "4.3.0","bootstrap": "^4.6.0","bootstrap-select": "^1.13.18","dropzone": "^5.7.6","jquery": "^3.5.1","jquery-ui": "^1.12.1","jquery.cookie": "^1.4.1","leaflet": "^1.7.1","magnific-popup": "^1.1.0","nouiSlider": "^14.6.3","object-fit-images": "^3.2.4","popper.js": "^1.16.1","prismjs": "^1.23.0","smooth-scroll": "^16.1.3","swiper": "^6.4.11","turbolinks": "^5.2.0"
  },"version": "0.1.0","devDependencies": {
    "webpack-dev-server": "^3.11.2"
  }
}

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


// Uncomment to copy all static images under ../images to the output folder and reference
// them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>)
// or the `imagePath` JavaScript helper below.
//
// const images = require.context('../images',true)
// const imagePath = (name) => images(name,true)


import JQuery from 'jquery';
window.jQuery = $;
window.$ = $;

import "popper.js";
import "bootstrap";
import "bootstrap-select";
import "dropzone";
import "jquery.cookie";
import "leaflet";
import "magnific-popup";
import "nouiSlider";
import "object-fit-images";
import "prismjs";
import "smooth-scroll";
import "swiper";


import "../vendor/datepicker-category"
import "../vendor/datepicker-detail"
import "../vendor/forms-dropzone"
import "../vendor/map-category"
import "../vendor/map-detail"
import "../vendor/map-layers"
import "../vendor/theme"

环境.js

const { environment } = require('@rails/webpacker')
const webpack = require("webpack");

// Add an additional plugin of your choosing : ProvidePlugin
environment.plugins.prepend(
  "Provide",new webpack.ProvidePlugin({
    $: "jquery",jQuery: "jquery",Popper: ["popper.js","default"] // for Bootstrap 4
  })
);

module.exports = environment

附加浏览器中的错误图像。感谢一百万。

解决方法

您是否尝试过更新到最新版本的 jQuery？我遇到了类似的问题，只能通过更新到 3.6.0 版来解决。