application.js内の記述について

Question

application.js内にて、下記の太字部分に波線が出ています。

require("@rails/activestorage").start()
require jquery
require jquery_ujs
require turbolinks
require_tree .
require activestorage

何故エラー扱いなのか分かりません。

application.js　全体

require("@rails/ujs").start()
require("@rails/activestorage").start()
require("channels")

require jquery
require jquery_ujs
require turbolinks
require_tree .
require activestorage

初歩的な質問かと思いますが、解決方法を教えてください。
よろしくお願いします。

Comments

[maisumakun]

・波線にマウスを乗せる、あるいは別枠などで詳細のメッセージは出ていませんか？
・このapplication.jsは、どこに置かれているものでしょうか？

[tomas0528]

カーソルを合わせることで、例えばactivestorageであれば、
module
"/Users/miyamotoyoshiki/Library/Caches/typescript/4.0/node_modules/@types/rails__activestorage/index"
"activestorage": Unknown word.cSpell
と出ます。
jqueryなどであれば、
any
"turbolinks": Unknown word.cSpell
';' が必要です。ts(1005)
と出ます。
試しに「require jquery;」 としてみましたが、変わらず波線が出ています。
このファイルは、app/ javascript/ packs内にあります。
よろしくお願いいたします。

Answer 1

Unknown word.cSpell

これは単に、ライブラリ名がスペルチェックの辞書にないだけです。無視して構いません（邪魔ならスペルチェックごと止めましょう）。

一方で、こちらはJavaScriptの文法的に成立していません。

require jquery
require jquery_ujs
require turbolinks
require_tree .
require activestorage

これらは昔のRailsで使っていたSprocketsの記法（の、しかも書き損ない）で、app/javascripts以下のWebpackerで処理するJavaScriptには使えません。

Comments

[tomas0528]

ご丁寧にありがとうございます。
JSの文法などを調べてみて、
require("jquery").start() などのように記述をしてみた所、エラー扱いがなくなりました。
今後ともよろしくお願いいたします。