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

Posted 2023-05-09

【中文标题】Rails 6 和 Jquery 插件错误：$(...).validate 不是函数

【英文标题】：Rails 6 and Jquery plugin error: $(...).validate is not a function

【发布时间】：2020-09-17 16:12:39

【问题描述】：

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

我使用这个库的步骤是

通过 Yarn 添加 jquery jquery-validation bootstrap popper expose-loader 在 environment.js 中定义 jQuery 在 environment.js 中公开 Jquery 在 application.js 中导入 jquery.validate 为表单上的验证规则导入自定义 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 未定义

另外，我尝试通过 application.js 方法中的 require('expose-loader?$!jquery') 公开 Jquery，但我仍然会收到错误消息，但如果我直接在控制台上调用该函数，它'得到认可

【参考方案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 是要走的路

【讨论】：

这解决了我在过去 4 个月里一直在努力解决的问题，但没有适当的帮助。我建议写一篇关于这个问题的文章。