6
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Rails6で非同期処理を実装する際、コンソールでUncaught ReferenceError: $ is not definedというエラーが出た時の対処法

Last updated at Posted at 2020-09-14

#はじめに
今回は私がオリジナルアプリの非同期処理のいいね機能を作成中にハマったエラーの解決方法を書かせて頂きます。
今回ご紹介するこちらの解決法は他に記事がなく(私が見つけられなかっただけかもしれませんが)、私自身かなり苦労しました。
なので、この記事がRails6での非同期処理の実装にお困りの方の助けになれば幸いです。

#バージョン
Rails6
(Rails5の方は対象外となります。)

#前提
JQueryの導入が完了していることを前提とします。

#エラー内容

Console.
VM108:1 Uncaught ReferenceError: $ is not defined
    at <anonymous>:1:13
    at processResponse (rails-ujs.js:283)
    at rails-ujs.js:196
    at XMLHttpRequest.xhr.onreadystatechange (rails-ujs.js:264)

このエラー文の内容としては
create.js.erbに書いてあるJQueryのコードが読み込めませんよ」という内容です。

#解決法

JQueryを読み込ませるにはjavascript/packs/application.jsに下記の記述をします。

application.js
window.$ = $;

これでJQueryをグローバルに使用できるようになり、
js.erbファイルでもJQueryを読み込むことができるようになります。

以上です。

いいね機能を作る際のコントローラやビューやルーティングのコードはたくさんの方が投稿してくれていますので
そちらをご覧いただければと思います。

6
6
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?