Rails 6 和 Jquery 插件错误：$(...).validate 不是函数

Question

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

我使用这个库的步骤是

1. 通过 Yarn 添加 jquery jquery-validation bootstrap popper expose-loader
2. 在 environment.js 中定义 jQuery
3. 在 environment.js 中公开 Jquery
4. 在 application.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，但我仍然会收到错误消息，但如果我直接在控制台上调用该函数，它'得到认可

Answer 1

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

所以我通过改变解决了这个问题

environment.plugins.prepend('Provide', new webpack.ProvidePlugin({
    $: 'jquery/src/jquery',
    jQuery: 'jquery/src/jquery',
    jquery: 'jquery/src/jquery',
    Popper: ['popper.js', 'default']
}))

到这里

environment.plugins.prepend('Provide', new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery',
    jquery: 'jquery',
    Popper: ['popper.js', 'default']
}))

我之前尝试过这样做，但由于那时我还没有使用expose-loader，所以它不起作用。

我在网上找到的另一个解决方案（但不适用于这个问题）是当 Yarn 加载 2 个不同的依赖项时，在这种情况下，yarn.lock 上的 yarn-deduplicate 是要走的路