#開発環境
Ruby 5.2.1
Rails 6.0.3.2
#はじめに
rails 5の頃はgemを使ってjQueryをインストールしていましたが、
rails 6からはWebpackerを用いてjQueryをインストールするようになりました。
Rails6でjQueryの導入方法
Introducing jQuery in Rails 6 Using Webpacker
このあたりの記事を参考に導入していきましたが、このようなエラーが…。
Uncaught TypeError: $ is not a function
どうやら 「$」が機能していないみたい。
ちなみにjsファイルにconsole.log('test');
だけ入力すると、
このようにjavascriptが動作しているため、jsファイルを読み込めていない系の
トラブルでは無いことがわかる。
#解決方法
結論:webpackの環境ファイルを修正して、解決しました
修正前
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/webpack/environment.js
const { environment } = require('@rails/webpacker')
const webpack = require('webpack')
environment.plugins.prepend('Provide',
new webpack.ProvidePlugin({
$: 'jquery', # 修正完了
jQuery: 'jquery/src/jquery'
})
)
module.exports = environment
#最後に
これでrails6環境でjsが使える!
ブログに今回実施したjQuery導入手順をまとめたので、よかったら見てください。
nakauの技術ブログ 〜プログラミングを学ぶ〜 | |
Rails6 - jQuery導入方法 |