Uncaught TypeError: $(...). Validate не является функцией в веб-пакете rails 6
Использование ruby 2.7.1p83, Rails 6.0.3.2 с webpack и yarn
установлен jquery-validation для проверки формы обновления пароля:
Файл package.json выглядит так:
{ "name": "garment_customizer_react", "private": true, "dependencies": { "@babel/plugin-proposal-decorators": "^7.10.4", "@fortawesome/fontawesome-free": "^5.13.1", "@rails/actioncable": "^6.0.0-alpha", "@rails/activestorage": "^6.0.0-alpha", "@rails/ujs": "^6.0.0-alpha", "@rails/webpacker": "4.2.2", "bootstrap": "^4.5.0", "huebee": "^2.1.0", "jquery": "^3.5.1", "jquery-ui": "^1.12.1", "jquery-ui-dist": "^1.12.1", "jquery-validation": "^1.19.2", "jquery.easing": "^1.4.1", "owl.carousel": "^2.3.4", "popper.js": "^1.16.1", "turbolinks": "^5.2.0" }, "version": "0.1.0", "devDependencies": { "webpack-dev-server": "^3.11.0" } }
файл сценария выглядит так:
<script> $(document).ready(function () { $("#form1").validate({ rules: { user_password: { required: true, minlength: 5 }, user_confirmation_password: { required: true, equalTo: "#user_password", minlength: 5 } }, messages: { password: " Enter Password", confirmpassword: " Enter Confirm Password Same as Password" } } ); }); </script>
получение этой ошибки в консоли браузера:
> readyException.js:6 Uncaught TypeError: $(...).validate is not a
> function
> at HTMLDocument.<anonymous> (settings:197)
> at mightThrow (deferred.js:97)
> at process (deferred.js:139)
Но я уже импортировал jquery и его файл проверки здесь как внутри pack/uploader.js:
import "jquery";
import "jquery-validation";
import "popper.js";
import "bootstrap";
import "jquery-ui";
import 'jquery.easing';
import './x3dom'
import '../stylesheets/assets_uploaders_layout.scss';
import "@fortawesome/fontawesome-free/js/all";
import "@fortawesome/fontawesome-free/css/all.css";
import '../stylesheets/x3dom.css';
любая идея, как это решить.
файл environment.js:
const { environment } = require('@rails/webpacker')
const webpack = require("webpack");
environment.plugins.append(
"Provide",
new webpack.ProvidePlugin({
$: 'jquery/src/jquery',
jQuery: 'jquery/src/jquery',
jquery: 'jquery/src/jquery',
Popper: ["popper.js", "default"]
})
);
module.exports = environment;