Rails6でのjQuery is not definedのエラーの対応

Uncaught ReferenceError: jQuery is not defined というエラーがrails6で出た時の対処方法をお伝えします。

まず、エラーではjQueryがないよといっています。 そのためある状態にしてあげれば良いのです。

yarn add jquery

でjqueryをyarnで入れます。ない場合は追加してください。 次に、app/javascript/packs/application.jsに下記のコードを追加してあげます。（一番上で大丈夫です）

require("jquery")

そして、config/webpack/environment.jsを下記のように書き換えます。

const { environment } = require('@rails/webpacker')

const webpack = require('webpack');
environment.plugins.append('Provide', new webpack.ProvidePlugin({
  $: 'jquery',
  jQuery: 'jquery'
}));

module.exports = environment

こうすることで、$とjQueryを明示的にプラグインとして認識させます。 次に

bin/webpack-dev-server

でwebpackeのdev serverを再起動させます。

Rails 6 webpack throwing 'Uncaught ReferenceError: $ is not defined'