Rails 6.1.3, webpacler, select2, getting error: readyException.js:6 Uncaught TypeError: $(...).select2 is not a function

Question

我是 Rails 6 和 webpacker 的新手。我用 rails 和 webpacker 创建了一个新应用程序，一切正常，但是当我尝试使用 select2 时，我运行遇到了一个问题，我得到 readyException.js:6 Uncaught TypeError: $( ...).select2 不是函数错误，我无法将所选属性提交到数据库。我查看并尝试了网上提出的一些建议，但没有奏效。不知道我哪里出错了。任何帮助深表感谢。顺便说一下，我正在使用 simple_form 和 Slim.

app/assets/application.scss

@import 'bootstrap/scss/bootstrap';

app/javascript/stylesheets/application.scss

@import 'bootstrap/scss/bootstrap';

app/javascript/packs/application.js

import Rails from "@rails/ujs"
import Turbolinks from "turbolinks"
import * as ActiveStorage from "@rails/activestorage"
import "channels"

import "jquery";
import "popper.js";
import "bootstrap";
import "../stylesheets/application"
import "@fortawesome/fontawesome-free/js/all"
import select2 from 'select2';
import 'select2/dist/css/select2.css';


require("@rails/activestorage").start()
require("channels")
require("jquery")



Rails.start()
Turbolinks.start()
ActiveStorage.start()


$(document).ready(function() {
  $('.select').select2();
});

config/webpack/environment.js

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

const webpack = require('webpack')
environment.plugins.prepend('Provide',
  new webpack.ProvidePlugin({
    $: 'jquery/src/jquery',
    jQuery: 'jquery/src/jquery'
  })
)

module.exports = environment

查看表单 views/users/_form.html.slim

    = simple_form_for [:admin, @user] do |f|
      = f.error_notification
      = f.error_notification message: f.object.errors[:base].to_sentence if f.object.errors[:base].present?


      .form-inputs.form-group.center-block style="width:240px"
        = f.input_field :first_name,
        placeholder: 'First Name',
        class: 'form-control',
        autofocus: true,
        required: true
      .form-inputs.form-group.center-block style="width:240px"
        = f.input_field :last_name,
        placeholder: 'Last Name',
        class: 'form-control',
        autofocus: true,
        required: true
      .form-inputs.form-group.center-block style="width:240px"
        = f.input_field :email,
        placeholder: 'Email',
        class: 'form-control',
        autofocus: true,
        required: true
      .form-inputs.form-group.center-block style="width:240px"
        = f.select :roles, Role.all.map { |role| role.name }, {include_blank: true, required: true,
        include_hidden: false}, class: 'form-control', input_html: {class: 'select'}


      .form-actions.form-group.center-block style="width:240px"
        button.btn.btn-primary.space-above type="submit" Save
        = link_to "Cancel", admin_users_path, class: 'btn btn-default space-left'

Answer 1

我认为您导入 jquery 两次可能会导致问题。

删除这些行：

require("@rails/activestorage").start()
require("channels")
require("jquery")

这些是上面几行的重复导入，（我认为）第二个 require("jquery") 可能会破坏 select2 插件。

此外，您没有使用导入的本地 select2 变量。这应该足够了：

import $ from 'jquery'
import 'select2'

$(document).ready(function() {
  $(...).select2()
})

我在演示回购中有一个分支，它有一个工作示例 https://github.com/rossta/rails6-webpacker-demo/compare/example/select2

Rails 6.1.3, webpacler, select2, getting error: readyException.js:6 Uncaught TypeError: $(...).select2 is not a function

Rails 6.1.3, webpacler, select2, getting error: readyException.js:6 Uncaught TypeError: $(...).select2 is not a function

javascript

ruby-on-rails

webpacker

ruby-on-rails-6.1