Rails 6.1.3，webpacler，select2，出现错误：readyException.js:6 Uncaught TypeError: $(...).select2 is not a f

Posted 2023-03-07

【中文标题】Rails 6.1.3，webpacler，select2，出现错误：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

【发布时间】：2021-06-23 16:18:24

【问题描述】：

我是 Rails 6 和 webpacker 的新手。我用 rails 和 webpacker 创建了一个新应用程序，一切正常，但是当我尝试使用 select2 时遇到了一个问题，我得到了 readyException.js:6 Uncaught TypeError: $(...).select2 is not a function错误并且无法将所选属性提交到数据库。我已经审查并尝试了网络上提出的几个建议，但没有奏效。不知道我哪里出错了。任何帮助深表感谢。顺便说一句，我使用的是 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

视图表单 意见/用户/_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'

【问题讨论】：

这***.com/questions/38473207/… 有帮助吗？

谢谢，当我添加 import $ from 'jquery' 时，它部分有帮助，它摆脱了 readyException.js:6 Uncaught TypeError: $(...).select2 is not a function 。但是，选择没有提交到数据库中。

【参考方案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

【讨论】：

感谢您的反馈，我已根据您的建议修改了 application.js，它确实摆脱了 Uncaught TypeError: $(...).select2 is not a function error，但我不是确定为什么 select 中的选定元素没有通过。以下是（rails s）上的补丁部分。我注意到的一件事是 Unpermitted parameter: : roles:

参数："authenticity_token"=>"[FILTERED]", "user"=>"first_name"=>"kirk1", "last_name"=>"Douglas2", "email"= >"[e-mail]", "roles"=>"guest", "id"=>"6" 用户负载 (0.4ms) SELECT "users".* FROM "users" WHERE "users"。 id" = $1 ORDER BY "users"."id" ASC LIMIT $2 [["id", 2], ["LIMIT", 1]] ↳ app/controllers/application_controller.rb:19:in `restrict_to_admin' 用户负载(0.4ms) SELECT "users".* FROM "users" WHERE "users"."id" = $1 LIMIT $2 [["id", 6], ["LIMIT", 1]] ↳ 不允许的参数：:roles