Ошибка плагина Rails 6 и Jquery: $ (...). Validate не является функцией - PullRequest
Новая
       85

Ошибка плагина Rails 6 и Jquery: $ (...). Validate не является функцией

0 голосов
/ 30 мая 2020

Я получаю следующую ошибку $(...).validate is not a function при попытке использовать jquery -validation в направляющих 6.

Шаги, которые я сделал для использования библиотеки, были

  1. Добавить jquery jquery -validation bootstrap popper expose-loader на всем протяжении Yarn
  2. Определить jQuery в среде. js
  3. Expose Jquery в среде. js
  4. Импорт jquery .validate в приложении. js
  5. Импортировать пользовательский js ("../pages/form-validation") для проверки правила для формы
  6. Создать форму

Я сделал то же самое для использования jquery -шагов, и это сработало отлично. Что мне не хватает?

среда. 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

приложение. 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"

проверка формы. js (настраиваемая js для проверки формы) 


$(document).on('turbolinks:load', function() {
    'use strict';
    $(function() {
        // validate signup form on keyup and submit
        $("#match-form").validate();
    });
})

При всем этом я получаю $ (...). Validate not defined

enter image description here

Кроме того, я попытался выставить Jquery через require ('expose-loader? $! jquery') в приложении. js подход, и я все равно получу ошибку, но если бы я вызвал функцию прямо на консоли, она бы распозналась

Console Error

1 Ответ

0 голосов
/ 11 июня 2020

Я наконец понял, в чем проблема, и это была моя среда. js, в то время как я выставлял jquery как решение (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-deduplicate на yarn.lock - это способ go

...