はじめに
右も左もわからない未経験エンジニアが書く記事です。
膨大な勉強量の中で、気になったことや発見などを書いていこうと思います。
間違いなど御座いましたら、教えて頂けると幸いです
開発環境
Rails 6.1.3.2
webpacker (5.4.0)
webpack 4.46.0
ruby 2.5.1
Docker version 20.10.6
devise (4.8.0)
今回の内容
Deviseでwebアプリにゲストログイン機能、SNS認証機能を導入し開発を進めていた時
認証されなくなりました（ログイン画面に行くだけで、実際にはログインされない状態）
Deviseのログイン画面からログインを試みるも、エラー発生
が、ブラウザの戻るボタンを押すとログインされている。。。
webアプリ内の機能を色々試してみましたが、ログイン関係とユーザーや記事の削除のみ
使用できなくなっていました
ゲストログイン機能やSNS認証機能関連のコードを変更したわけでもなく
なぜ！？っとびっくりしたのでメモ
原因
app/javascript/packs/application.js内の記述ミス
// This file is automatically compiled by Webpack, along with any other files
// present in this directory. You're encouraged to place your actual application logic in
// a relevant structure within app/javascript and only use these pack files to reference
// that code so it'll be compiled.
import Rails from "@rails/ujs"
import Turbolinks from "turbolinks"
import * as ActiveStorage from "@rails/activestorage"
import "channels"
import "jquery"
import "bootstrap"
import "@fortawesome/fontawesome-free/js/all"
import "../stylesheets/application.scss"
import "../stylesheets/homu.scss" // 記述ミス箇所 正しくはhome.scss
・
・
・
Rails.start()
Turbolinks.start()
ActiveStorage.start()
発生したエラー文
[Webpacker] Compiling...
[Webpacker] Compilation failed:
Hash: ・・・・・・
Version: webpack 4.46.0
Time: 52423ms
Built at: 08/10/2021 9:28:28 AM
・
・
・
ERROR in ./app/javascript/packs/application.js
Module not found: Error: Can't resolve 'homu' in '/app/app/javascript/packs'
@ ./app/javascript/packs/application.js 19:0-20
・
・
・
何が起きたのか
上記エラー文を見ればわかりますが、
./app/javascript/packs/application.js内で
moduleが見つからずhomuを処理できませんとのこと
つまり用意したhome.scssではなく、homu.scssをimportしてね！と指示してしまっているので
webpackerが「そんなファイルないよ〜
」と嘆いている状態だと考えています笑
それによりwebpackerのコンパイルが失敗し、エラー箇所で処理が止まってしまい
その後のコードが読み込まれていませんでした
webpackerについてはこちら
今回注目すべき部分は以下３点
import Rails from "@rails/ujs"
・
import "../stylesheets/homu.scss" // 記述ミス箇所 正しくはhome.scss
・
Rails.start()
エラー箇所よりも先で待つ Rails.start() が処理されないせいで
@rails/ujsが読まれなくなってしまった
という事は、importしているファイルでエラーが発生した場合も@rails/ujsが読まれなくなり
正常に表示されなくなります。
例えば、cssファイルのタイポや記述ミスにより同様の症状が現れます。
webpackerを使って開発中に
「急にデザインが崩れた！」とか
「急にシステムが正常に働かなくなった！」など
焦らずにチェックを行いましょう♪
rails/ujsとは
UJS: Unobtrusive（控えめな）JavaScript
詳しくは下記リンクをお読みください
例えばform_withでは、デフォルトでAjaxをフォームで使えることが前提であり
それをサポートしてくれているのがrails/ujsだと考えています
そのrails/ujsが読まれないことでログインと削除機能が使えなくなったのだと思います
下記サイトがとても参考になりました！
ありがというございます
最後に
勉強を始めたばかりで知識もなく、拙い文章ですがアウトプットすることで頭の中を整理しつつ、どなたかのお役に立てれば良いなと思い投稿させて頂きました。
最後まで見て頂きありがとうございました！