Rails6でjQueryを使おうとしたらハマった

Rails6.0.3にjQueryを入れようとしたらハマった話

by @tatsuhiko-nakayama様

こちらの記事で

yarn add jquery

config/webpack/environment.js

const { environment } = require('@rails/webpacker')
// 以下追記
const webpack = require('webpack')
environment.plugins.prepend('Provide',
    new webpack.ProvidePlugin({
        $: 'jquery/src/jquery',
        jQuery: 'jquery/src/jquery'
    })
)
// ここまで
module.exports = environment

config/javascript/packs/application.js

//中略

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

//中略

をやったのだが下のエラー発生

ERROR in ./app/javascript/packs/application.js
 Module build failed (from ./node_modules/babel-loader/lib/index.js):
 Error: Cannot find module './node_modules/@rails/webpacker/package/babel/preset.js' from '/myapp'

webpackのインストールが失敗？
いや、node_modulesとbabelって書いてあるからそこが不足しているのか…
など色々試行錯誤したが、
結局アンインストールして入れ直しで解決

# webpacker：installで追加されたpackage.jsonから無効なbabelpresetを削除
yarn remove @rails/webpacker
yarn remove webpack webpack-cli webpack-dev-server
rm -fr node_modules
rm -fr public/packs
bundle exec rails webpacker:install
Railsアプリの階層にある.browserlistrcを手動で削除する
yarn add node-releases
yarn add electron-to-chromium
bundle exec rails webpacker:compile
# おわり

備考

Rails6のwebpackerは壊れやすいようです。 npmも同じく壊れやすいらしいので色々インストールしてる間に、コンフリクトしたのかなと分析。 解決まで時間がかかり焦ってしまったが、明けない夜はないように明けないエラーもないのかなと。

参考