jquery-ui と jquery.validationEngine を同時に使いたいのですがうまくいきません
どちらも $ っていう変数に対してメソッドを追加してるんだと思うんですが片方を使うともう片方が使えなくなります
jquery-ui は公式サイトダウンロードビルダーから zip ダウンロードしたものを
app/javascript/vendor/jquery-ui
に展開
jquery.validationEngine は
app/javascript/vendor/jquery.validationEngine
に clone してあります
config/webpack/environment.js をデフォルトのまま
application.js に
globalThis.jQuery = globalThis.$ = require('jquery');
import '../vendor/jquery-ui/jquery-ui.min.js'
import '../vendor/jquery-ui/jquery-ui.min.css'
import '../vendor/jquery-ui/jquery-ui.theme.min.css'
とかくと $.slider() が動きますが
import '../vendor/jQuery-Validation-Engine/js/jquery.validationEngine';
を追加すると
jquery.validationEngine.js:2163 Uncaught ReferenceError: jQuery is not defined
at Object../app/javascript/vendor/jQuery-Validation-Engine/js/jquery.validationEngine.js (jquery.validationEngine.js:2163)
at __webpack_require__ (bootstrap:19)
at Module../app/javascript/packs/application.js (application.js:1)
at __webpack_require__ (bootstrap:19)
at bootstrap:83
at bootstrap:83
と jQuery が見つからないというエラーになります
globalThis.jQuery = に代入しているにもかかわらず
なぜそのあとの import で jQuery がみつからなくなるんでしょうか
一方で config/webpack/environment.js に
environment.plugins.prepend('Provide',
new webpack.ProvidePlugin({
$: 'jquery/src/jquery',
jQuery: 'jquery/src/jquery'
})
);
をかくと application.js で
import '../vendor/jQuery-Validation-Engine/js/jquery.validationEngine';
をしてもエラーが出なくなるんですが
import '../vendor/jquery-ui/jquery-ui.min.js'
import '../vendor/jquery-ui/jquery-ui.min.css'
もかいてるにもかかわらず $.slider(); で
Uncaught TypeError: $(...).slider is not a function
となってしまいます
追記:
Rails6 webpacker から bootstrap js を使う方法
ProvidePlugin を記述するとこちらで教えていただいた bootstrap の JS も
jquery-ui に関係なく (jquery-ui関連のインポートを全部消しても)
$(...).modal is not a function
で動かなくなってしまいました
Rails + webpacker における global と window と config/webpack/environment.js の違い
最近こちらの質問をみかけたんですが
globalThis と ProvidePlugin でなぜ挙動がかわってしまうんでしょうか
ProvidePlugin があまり理解できてないなくてこれまではなしで動いていたので
できれば ProvidePlugin を使わずに globalThis だけで
jQuery-Validation-Engine を動かしたいのですが方法はないでしょうか
今の application.js がこんな感じで
ここに validation engine を追加しようとしました
import Rails from '@rails/ujs'
globalThis.Rails = Rails
Rails.start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
import * as jquery from 'jquery'
globalThis.jQuery = globalThis.$ = jquery;
import * as bootstrap from 'bootstrap'
globalThis.bootstrap = bootstrap
// // jQuery-Validation-Engine
// import '../vendor/jQuery-Validation-Engine/js/jquery.validationEngine';
// // require('../vendor/jQuery-Validation-Engine/js/languages/jquery.validationEngine-ja');
// import '../vendor/jQuery-Validation-Engine/js/languages/jquery.validationEngine-en';
/* Validate form */
// $(document).on('turbolinks:load', function () {
// $("form").validationEngine();
// });
import '@fortawesome/fontawesome-free/js/all';
import '../vendor/jquery-ui/jquery-ui.min.js'
import '../vendor/jquery-ui/jquery-ui.min.css'
import '../vendor/jquery-ui/jquery-ui.theme.min.css'
import * as moment from 'moment'
globalThis.moment = moment
import '../stylesheets/application.scss';