bootstrapとjQuery適用されない
RailsTutorial8章で発生したエラーの自分用メモを再編集しています。
誰かの参考になるかどうか気にしていません。
プルダウンが動かない
結論から言うと一度bootstrapとjQueryを削除して入れ直したら良いと思います。
warning ../../package.json: No license fieldは親ディレクトリにいるpackage.jsonを削除すると解消されます。
以下は奮闘記です。
$ yarn add jquery@3.4.1 （再実行）
yarn add v1.22.19
warning ../../package.json: No license field
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
warning " > webpack-dev-server@4.9.2" has unmet peer dependency "webpack@^4.37.0 || ^5.0.0".
warning "webpack-dev-server > webpack-dev-middleware@5.3.3" has unmet peer dependency "webpack@^4.0.0 || ^5.0.0".
[4/4] Building fresh packages...
success Saved 0 new dependencies.
Done in 5.33s.
インストール時はWarningのみでsuccess・doneといった表示
エラーも出ていないのに、
・ログイン前後で表示が変わらない（分岐できていない）
・プルダウン出来ない
Chrome consoleで
$.fn.jquery （$もコードの一部）
VM89:1 Uncaught TypeError: Cannot read properties of undefined (reading 'jquery')
at <anonymous>:1:6
jQueryが使われていないとなる
sample_app2/package.jsにライセンス情報を与える
name": "sample_app",
"license": "UNLICENSED",
"private": true,
（省略）
warning ../../package.json: No license field
package.json No license field
Yarnのインストールが適切に行われていない場合も発生するメッセージらしい
$ rm -rf yarn.lock
yarn add v1.22.19
warning ../../package.json: No license field
info No lockfile found.
[1/4] Resolving packages...
warning @rails/webpacker > webpack > watchpack > watchpack-chokidar2 > chokidar@2.1.8: Chokidar 2 does not receive security updates since 2019. Upgrade to chokidar 3 with 15x fewer dependencies
warning @rails/webpacker > webpack > watchpack > watchpack-chokidar2 > chokidar > fsevents@1.2.13: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
warning @rails/webpacker > postcss-preset-env > postcss-color-functional-notation > postcss-values-parser > flatten@1.0.3: flatten is deprecated in favor of utility frameworks such as lodash.
warning @rails/webpacker > webpack > micromatch > snapdragon > source-map-resolve@0.5.3: See https://github.com/lydell/source-map-resolve#deprecated
warning @rails/webpacker > webpack > node-libs-browser > url > querystring@0.2.0: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.
warning @rails/webpacker > webpack > micromatch > snapdragon > source-map-resolve > resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
warning @rails/webpacker > webpack > micromatch > snapdragon > source-map-resolve > source-map-url@0.4.1: See https://github.com/lydell/source-map-url#deprecated
warning @rails/webpacker > webpack > micromatch > snapdragon > source-map-resolve > urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
warning @rails/webpacker > optimize-css-assets-webpack-plugin > cssnano > cssnano-preset-default > postcss-svgo > svgo@1.3.2: This SVGO version is no longer supported. Upgrade to v2.x.x.
warning @rails/webpacker > optimize-css-assets-webpack-plugin > cssnano > cssnano-preset-default > postcss-svgo > svgo > stable@0.1.8: Modern JS already guarantees Array#sort() is a stable sort, so this library is deprecated. See the compatibility table on MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#browser_compatibility
[2/4] Fetching packages...
[3/4] Linking dependencies...
warning " > webpack-dev-server@4.9.3" has unmet peer dependency "webpack@^4.37.0 || ^5.0.0".
warning "webpack-dev-server > webpack-dev-middleware@5.3.3" has unmet peer dependency "webpack@^4.0.0 || ^5.0.0".
[4/4] Building fresh packages...
success Saved lockfile.
success Saved 637 new dependencies.
info Direct dependencies
別のpackage.jsonを参照してしまっているかも
hello_app,toy_appを削除
$ rm -rf yarn.lock
まだNO LICENSE
$ yarn add jquery@3.4.1 bootstrap@3.4.1 ~/sample_app_2/package.json
（省略）
error Package "/home/ubuntu/sample_app_2/package.json" refers to a non-existing file '"/home/ubuntu/sample_app_2/package.json"'.
info Visit https://yarnpkg.com/en/docs/cli/add for documentation about this command.
package.jsonを指定してみたけど
指定できてなさそうコマンドが違うらしい
warning " > webpack-dev-server@4.9.3" has unmet peer dependency "webpack@^4.37.0 || ^5.0.0".
warning "webpack-dev-server > webpack-dev-middleware@5.3.3" has unmet peer dependency "webpack@^4.0.0 || ^5.0.0"
sample_app_2/package.json↓
{
"name": "sample_app",
"license": "UNLICENSED",
"private": true,
"dependencies": {
"@rails/actioncable": "^6.0.0",
"@rails/activestorage": "^6.0.0",
"@rails/ujs": "^6.0.0",
"@rails/webpacker": "^5.4.3",
"bootstrap": "3.4.1",
"jquery": "3.4.1",
"turbolinks": "^5.2.0"
},
"version": "0.1.0",
"devDependencies": {
"webpack-dev-server": "^4.9.2"
}
}
上記ファイルをtutorialのgithubと同じ内容にしてみる
追加
"webpack": "^4.46.0",
"webpack-cli": "^3.3.12"
変更
"webpack-dev-server": "^3"
問題のコード(冒頭のyarn add~)をターミナルに
（省略）
warning ../../package.json: No license field
[1/4] Resolving packages...
warning webpack-dev-server > webpack-log > uuid@3.4.0: Please upgrade to version 7 or higher. Older versions may use Math.random() in certain circumstances, which is known to be problematic. See https://v8.dev/blog/math-random for details.
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Saved lockfile.
success Saved 60 new dependencies.
info Direct dependencies
（省略）
出力に変化あり
もう一度yarn add~をターミナルに打つと
2個目のWarningも消えた
全てのpackage.jsonを確認するも
Warningに関連する内容はなさそうだったので
参照しているファイルは合っているよう。
試しにエラー対処のため自身で追加した
"license": "UNLICENSED"
をコメントアウトしてみる
yarn add~を再度
error An unexpected error occurred: "/home/ubuntu/environment/sample_app_2/package.json: Unexpected token / in JSON at position 28".
トークンがないらしい
コメントアウトではなく削除してみる
warning ../../package.json: No license field
のみに戻った
“license”: “ISC”
に表記を変えてみるも変わらず
その前にWarningに出たpackage.jsonをそのままクリックして開く
開けない
どうやらNO LICENSEだからbootstrapとjQueryが入らないというわけではなさそう
Warningだから直接的な原因ではないよう
cloud9のツリーでは確認できず、検索にも引っかからないので
親ディレクトリにはないと思ったが
$ cd ..
$ cat ../package.json
{
"dependencies": {
"node-cleanup": "^2.1.2",
"tmp": "^0.0.33"
}
}
他にもpackage.jsonがないか確認
$ cd ..
$ cat ../../package.json
$ cat /package.json
$ cd environment/
$ cat /package.json
$ cat ../package.json
$ cat ../../package.json
見つけたpackage.jsonを削除する。
$ rm ../package.json
$ cd sample_app_2
$ yarn add jquery@3.4.1 bootstrap@3.4.1
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Saved 0 new dependencies.
Done in 5.33s.
warningが出なくなった！！
HPの挙動は変わらず。
チュートリアルに沿って変化を加えた部分を削除
environment.js
application.js
一度jqueryとbootstrapを削除
$ yarn remove jquery
[1/2] Removing module jquery...
[2/2] Regenerating lockfile and installing missing dependencies...
success Uninstalled packages.
Done in 5.56s.
$ yarn remove bootstrap
[1/2] Removing module bootstrap...
[2/2] Regenerating lockfile and installing missing dependencies...
success Uninstalled packages.
Done in 5.19s.
入っていたけど読み込めてなかった？
$ yarn add jquery@3.4.1 bootstrap@3.4.1
yarn add v1.22.19
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Saved lockfile.
success Saved 2 new dependencies.
info Direct dependencies
├─ bootstrap@3.4.1
└─ jquery@3.4.1
info All dependencies
├─ bootstrap@3.4.1
└─ jquery@3.4.1
Done in 6.34s.
チュートリアルに沿ってファイルに追記
environment.js
application.js
HPに変化が！
プルダウンが動いた！
ログイン前なのにログイン後のヘッダーが表示される
ログイン前なのにヘッダ―が Home Help Users Account
期待する動きではない
一度タブを閉じたのにプルダウンからProfileページへ飛ぶと
アカウントが表示されたので
ログイン前なのではなくセッションが切れていないかも
ページ下の表示
controller: users
action: show
id: '3'
permitted: false
Chrome デベロッパーツールコンソール
$ $.fn.jquery
’3.4.1’
チュートリアルより
注意: もしブラウザの［閉じたときの状態に戻す］機能をオンにしていると、セッション情報も復元される可能性があります。もしその機能をオンにしている場合、忘れずにオフにしておきましょう
Edgeで見ていたのでChromeで確認するとヘッダーは期待通り動いた！
当時は何が何だかわからなかったが今見た感想を。
warningを必死に消そうとしなくてもよかったのかもしれない。そもそもwarningは警告でありそのままにしても動くということを後々知る。でも何が原因かわからない中、全ての可能性を潰そうと頑張っているのが良い。今後も頑張ってほしい。
bootstrapが効かないことに関してはまた別の機会にぶち当たることとなる。多分削除して入れ直せば良い。初学者故に初めてのwarningに気を取られてしまったが、先に入れ直したらすんなり行く気がする。
そしてログインしているのにヘッダーが変わらないのはTutorialに答えが書いてあった。bootstrapは関係ない。当時はEdgeでAWSを開きChromeも使っていたはず。この件があってメインをChoromeに切り替えた。タブをいくつも開くと処理落ちするので二刀流だったが今は神にPCをお借りしているためChrome一本。ありがたや！たくさんの人の優しさにより生きています。
Discussion