Uncaught ReferenceError: $ is not defined Rails６

Rails６で非同期処理がうまくいかなかったので備忘録。

Uncaught ReferenceError: $ is not defined

原因としては

・jQueryがうまく読み込めていなかった。
・Rails6でのjQuery導入ができていなかった

参考にした記事

導入方法

$ yarn add jquery

config/webpack/environment.js
javascript/packs/application.js
に下記を追加

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

application.js

require("jquery")