Rails 6和Jquery插件错误：$（...）。validate不是一个函数

Question

尝试在导轨6中使用$(...).validate is not a function时出现以下错误jquery-validation。>

我使用该库的步骤是

1. 全部通过纱线添加jquery jquery-validation引导程序popper暴露加载程序
2. 在environment.js中定义jQuery
3. 在environment.js中暴露Jquery
4. 在应用程序.js中导入jquery.validate
5. 为表单上的验证规则导入自定义js（“ ../ pages / form-validation”）>
6. 创建表单

我也使用jquery-steps做过同样的事情，并且效果很好。我想念什么？

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',
    jquery: 'jquery/src/jquery',
    Popper: ['popper.js', 'default']
}))

environment.loaders.append('jquery', {
    test: require.resolve('jquery'),
    use: [{
        loader: 'expose-loader',
        options: '$',
    }, {
        loader: 'expose-loader',
        options: 'jQuery',
    }],
})

module.exports = environment

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


//Dependencias globales
import "bootstrap"
import "../globals/off-canvas"
import "../globals/hoverable-collapse"
import "../globals/misc"
import "../globals/settings"



// Componentes externos
import flatpickr from "flatpickr";
import "flatpickr/dist/flatpickr.min.css"
import "jquery-steps/build/jquery.steps"
import "jquery-validation/dist/jquery.validate"

//Componentes de proleague

// JS especifico para ciertas páginas
import "../pages/wizard-forms"
import "../pages/datepicker"
import "../pages/form-validation"
form-validation.js
（用于表单验证的自定义js）

$(document).on('turbolinks:load', function() {
    'use strict';
    $(function() {
        // validate signup form on keyup and submit
        $("#match-form").validate();
    });
})
有了所有这些，我得到了一个$（...）。validate未定义

[此外，我尝试通过application.js方法中的require（'expose-loader？$！jquery'）公开Jquery，但仍然会收到错误，但是如果我直接在控制台上调用该函数，则会得到认可

我在尝试在rails 6中使用jquery-validation时出现以下错误$（...）。validate不是一个函数。我使用该库的步骤是Add jquery jquery-validation bootstrap ...

Answer 1

我终于弄清了问题所在，这是我的environment.js，当我在ProvidePlugin中将jquery公开为resolve（jquery）和jquery / src / jquery时，这导致我的应用程序两次加载Jquery，因此，阻止jquery-validate正常工作

所以我通过更改解决了问题