jQuery が認識されない

Question

前提・実現したいこと

rails 6 を使っています。
yarn add jquery でインストール・設定したのですが、 jQuery を erb ファイルから呼び出すことができません。

<script>
  jQuery(function($) {
    alert("hello")
  })
</script>

発生している問題・エラーメッセージ

chrome の console には以下が発生します。

Uncaught ReferenceError: jQuery is not defined

console 上で jquery のバージョン確認をするため以下のコマンドを叩くと似たようにエラーになります。

> $.fn.jquery
Uncaught TypeError: Cannot read property 'jquery' of undefined
    at <anonymous>:1:6

該当のソースコード

config/webpack/environment.js ↓

// config/webpack/environment.js
const { environment } = require('@rails/webpacker')

const webpack = require('webpack')
environment.plugins.prepend(
  'Provide',
  new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery',
    Popper: ['popper.js', 'default']
  })
)

module.exports = environment

app/javascript/packs/application.js ↓

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require("jquery")

import 'bootstrap';

document.addEventListener("turbolinks:load", () => {
  $('[data-toggle="tooltip"]').tooltip()
  $('[data-toggle="popover"]').popover()
});

require("trix")
require("@rails/actiontext")

補足情報

実はこの状況で bootstrap4 の tooltip や popover などは動いています。
(つまり、 jQuery や popper は使えているはず)

そして、
config/webpack/environment.js の ProviderPlugin の jquery のパスを以下のようにすると
問題は改善され、代わりに bootstrap4 の tooltip や popup が動かなくなります(T_T)

  new webpack.ProvidePlugin({
    $: 'jquery/src/jquery', // ← 第２引数の記述が冒頭のやつと異なる
    jQuery: 'jquery/src/jquery', // ← 第２引数の記述が冒頭のやつと異なる

Comments

[no1knows]

あぁ、これと同じ問題っぽいですね。。。僕も原因を知りたいです。
https://teratail.com/questions/279420#reply-397854

Answer 1

WebpackでjQueryを読み込んだ場合、特に何も指定しないとそれはWebpackに閉じたものとなり、外部から参照できません。

app/javascript/packs/application.jsに、window.jQuery = window.$ = require('jquery')のように書いて、window経由でjQueryや$へアクセスできるようにしておきましょう。

Comments

[naokit-dev]

こんにちは、横から失礼いたします
同様の現象に遭遇した経験があり、併せて質問させていただきたいのですが

回答されている内容の目的として、
質問者様が
`config/webpack/environment.js`
に記述されているものとは異なるのでしょうか？

ご教授いただけますと幸いです。

[maisumakun]

> `config/webpack/environment.js`
に記述されているものとは異なるのでしょうか？

はい、ProvidePluginは、Webpackが処理するコードにある$やjQueryの解決を行うものです。ビューに直接<script>で書いたものや、コンソールに打ち込むものには影響しません。

[naokit-dev]

回答ありがとうございます。
理解が深まりました。

no1knowsさんが提示いただいたように
類似した環境でBootstrapのmodalというjavascriptのみが動作しない問題に直面しており、
こちらを参考に再度検証と状況整理をしてみたいと思います。
https://teratail.com/questions/279420#reply-397854

[naserehari]

なるほど、 ProvidePlugin は Webpack の範囲内だけなのか。理解できました。
ありがとうございました。