Rails 6 and Jquery plugin error: $(...).validate is not a function

Question

我在 rails 6.

中尝试使用 jquery-validation 时遇到以下错误 $(...).validate is not a function

我使用库的步骤是

添加jquery jquery-validation bootstrap popper expose-loader all through Yarn
在environment.js
在environment.js
在 application.js
为表单的验证规则导入自定义 js ("../pages/form-validation")
创建表单

我用 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 not defined

此外，我尝试通过 application.js 方法中的 require('expose-loader?$!jquery') 公开 Jquery，但我仍然会收到错误消息，但如果我直接在控制台，它会被识别

Answer 1

我终于弄清楚问题出在哪里，这是我的 environment.js，而我在我的 jquery 中将 jquery 公开为 resolve(jquery) 和 jquery/src/jquery ProvidePlugin，它导致我的应用程序加载 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 是可行的方法

Rails 6 and Jquery plugin error: $(...).validate is not a function

Rails 6 and Jquery plugin error: $(...).validate is not a function

jquery

ruby-on-rails

jquery-validate

webpack

yarnpkg