Webpackerを用いてjQueryとAjaxを反映させる方法[Rails][Webpack][jQuery] #Rails

これはEC2を用いたRailsアプリの本番環境で、jQueryとAjaxが動作しないエラーが発生した際の解決策です。原因に関しましては、少し特殊ですが、RailsアプリでWebpackerを用いてコンパイルしたいという方には少し参考になると思います。

このエラーは以下の記事の後日談のような形です。

結論

以下のコードはあくまでコンパイルの設定ファイルです。そもそものjsやjqueryのコードが存在しないと意味をなしません。

アプリ名/config/webpack/environment.js

const { environment } = require('@rails/webpacker')
# ここから
var webpack = require('webpack');

environment.plugins.prepend(
    'Provide',
    new webpack.ProvidePlugin({
        $: 'jquery/src/jquery',
        jQuery: 'jquery/src/jquery',
        Popper: ['popper.js', 'default']
    })
)
# ここまでを追記
module.exports = environment

現状

上記の記事からの続きで、Webpackerを導入できていることを前提とします。
その前提で、これまで開発環境ではjQueryとAjaxが正常に動作しており、本番環境ではwebpackerが導入されているにも関わらず、反応しません。またログにはエラーも見当たりませんでした。

解決まで

前回のエラーから学び、「環境が依存が原因だろ(๑˃̵ᴗ˂̵)」と考えていました。
しかしながら、config/environments配下の設定を見比べ、それぞれの設定を個別に比較したにも関わらず、原因を特定できませんでした（ここで結構時間を食う）。

そこで一度本番環境のコードを開発環境にgit pullし、そもそも環境依存が原因であるかどうか確定させよう、と思いました（まず最初にやるべきでした）。
その結果、開発環境でもjQueryやAjaxが動作しなくなりました( ・∇・)。

ということで、これまでの開発環境のコードと現状でpullしたコードのgit diff で確認してみると、以下の結果が分かりました。

アプリ名/config/webpack/environment.js

const { environment } = require('@rails/webpacker')
- var webpack = require('webpack');

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

module.exports = environment

おおっ！設定できてない、というか設定消してるやん！

ということで、今回のエラーは、webpackを再設定などする過程で、過去に自分が設定したコードを削除していたということでした。
ちなみに、上記のコードを追加すれば、Webpackerを用いてjQueryとAjaxを反映させることが出来ると思います（多分）。

まとめ

今回のエラーでは、webpackの設定変更という話ではなく、エラー対応への向き合い方をまた一つ学びました。
ライブラリなどを追加・再設定する場合には、これまでのコードが上書きされる場合がある為、まずはライブラリ導入後の差分を確認すること。

エラー解決日記でした。最後までお読み頂きありがとうございました。