😊

bootstrapとjQuery適用されない

2023/05/07に公開

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といった表示
エラーも出ていないのに、
・ログイン前後で表示が変わらない(分岐できていない)
・プルダウン出来ない

https://qumeru.com/magazine/268
Chrome consoleで

$.fn.jquery ($もコードの一部)

VM89:1 Uncaught TypeError: Cannot read properties of undefined (reading 'jquery')
    at <anonymous>:1:6

jQueryが使われていないとなる

https://qiita.com/kozakura16/items/ebaf8ea58fc49dcbdd73
https://blog.pinkumohikan.com/entry/set-unlicensed-to-license-field-when-private-product
https://docs.npmjs.com/cli/v8/configuring-npm/package-json
sample_app2/package.jsにライセンス情報を与える

name": "sample_app",
  "license": "UNLICENSED",
  "private": true,
(省略)
warning ../../package.json: No license field

package.json No license field

https://qiita.com/programming_owl/items/85840ad7481b01459080
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

https://stackoverflow.com/questions/45690202/how-to-have-yarn-not-issue-a-warning-for-the-license-field
別の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
のみに戻った

https://teratail.com/questions/363376
“license”: “ISC”
に表記を変えてみるも変わらず

その前にWarningに出たpackage.jsonをそのままクリックして開く
開けない

どうやらNO LICENSEだからbootstrapとjQueryが入らないというわけではなさそう
Warningだから直接的な原因ではないよう

https://pages.michinobu.jp/t/yarnwarningnolicensefield.html
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一本。ありがたや!たくさんの人の優しさにより生きています。

結論:warningに気を取られず、まずはbootstrapを削除して入れ直す

Discussion