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

Posted

技术标签:

【中文标题】Rails 6 + Webpacker:未捕获的类型错误:$(...).select2 不是函数【英文标题】:Rails 6 + Webpacker: Uncaught TypeError: $(...).select2 is not a function 【发布时间】:2021-05-16 10:41:47 【问题描述】:

我正在尝试让 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 'select2'; 上方添加 import $ from 'jquery'; 这可行,但会破坏 datetimepicker 导致 Uncaught TypeError: jquery__WEBPACK_IMPORTED_MODULE_2___default(...)(...).datetimepicker is not a function 我不知道发生了什么.

非常感谢任何帮助,谢谢!

【问题讨论】:

这能回答你的问题吗? How can I using select2 with webpack? @GrzegorzT.不,它没有。正如我所说,添加import $ from 'jquery'; 可以解决问题,但会破坏 datetimepicker。我正在寻找一种适用于双方的解决方案 它与依赖关系无关,我的意思是jquery和版本?看到这个解决方案,webpack-how-to-avoid-multiple-versions-of-jquery 把一些版本放在 githab 上,测试版本,因为现在我们是这样拍摄的。 【参考方案1】:

我很快就准备好了代码,它运行良好。我刚刚将它添加到插件中:

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,但最重要的事情有效:)

【讨论】:

以上是关于Rails 6 + Webpacker:未捕获的类型错误:$(...).select2 不是函数的主要内容,如果未能解决你的问题,请参考以下文章

Rails 6.0.3.4 [Webpacker] 编译失败

rails 6 / webpacker tooltip and popover event listeners TypeError: $(...).tooltip is not a function

在 Webpacker 中使用 jQuery 插件

未捕获的 ReferenceError:未定义 jstz

Rails 5/6:如何在 webpacker 中包含 JS 函数?

带有 Vue 和 webpacker 3 的 Rails 5.1 应用程序,未编译 css