CSSやJavascriptのerrorと解決方法まとめ

command+Fなどで検索してください。初心者用も一応、残しておきます。

javascriptのエラー(error)

‘a’ is constant

基本です。constの再代入はできません。配列から値を取る方法や、定数ではなく変数ならletがあります。letは代入できます。

Uncaught TypeError: Cannot read property ‘length’ of undefined

Uncaught TypeError: Cannot read property 'length' of undefined

未定義エラーです。該当ファイルが表示されているはずなので、そのファイルをみてみましょう。

プラグインファイルのエラーの場合、importすることにより、別の場所に影響が及ぼすことがあります。

TypeError: “x” is not a function

TypeError: "x" is not a function

これ系のエラーは関数名が間違っていることが大変です。大文字小文字、sのつけ忘れなど。

CSSのエラー(error)

This relative module was not found:

This relative module was not found:

画像の読み込みのエラーなのですが、CSSのパスは次のように書かないとダメなようです。

/* NG
background: url(~/assets/images/test.jpg) repeat-x;
background: url('~/assets/images/test.jpg') repeat-x; */

/* OK */
background: url('../assets/images/test.jpg') repeat-x;
background: url("../assets/images/test.jpg") repeat-x;

srcなどでこう指定するから紛らわしいです。

src="~/assets/images/test.jpg"

その他のエラー(error)

there are multiple modules with names that only differ in casing

there are multiple modules with names that only differ in casing

画像読み込みのWARNですね。画像ファイル名とコードの大文字と小文字が揃っていないとwarningがでます。

SyntaxError: Unexpected token u in JSON at position 0

SyntaxError: Unexpected token u in JSON at position 0

JSON.parse()しちゃいけないところでJSON.parse()しています。

undefinedをJSON.parse()すると、このエラーがでます。

Already included file name ‘pass’ differs from file name ‘pass’ only in casing.

Already included file name 'pass' differs from file name 'pass' only in casing.
  The file is in the program because:
    Root file specified for compilation
    Imported via

でも、あっているはず。直近でファイル移動したことを思い出しました。VS Codeを再起動したらこのエラーは消えました。

他の修正が必要な場合もあるような気がします。

error The “xxx” component has been registered but not used vue/no-unused-components

error  The "xxx" component has been registered but not used  vue/no-unused-components

凡ミス。html側にコンポーネントが使われていない。ありがちなのは大文字と小文字の違いで検索が判別しない設定になっていた。

nuxtのhot-update.json timed out.

このエラーがでると再読み込みしても更新されません。nuxtででるんですが、nuxtのエラーではないようです。

このエラーは厄介です。よい解決方法があればコメント欄で教えてもらいたいぐらいです。

bootstrap:91 Uncaught (in promise) Error: Manifest request to /_nuxt/9e79fa2e96c521c45443.hot-update.json timed out. at XMLHttpRequest.request.onreadystatechange (bootstrap:91)

エラーがでるとnpm run devしなおしてもまたエラーがでます。いろいろやったのですが、簡単で有効な手段としてポート番号を変えることです。

"dev": "nuxt --port 3333",

しかし、応急処置にすぎず、またしばらくすると同じエラーがでる場合があります(調子がよい場合もあります)。

"dev": "nuxt --port 3334",

そしたらまた他の番号にします。PCの再起動では改善されません。

ネット環境が変わったときにでる気もします(?)ので、発生の法則をつかめるといいかもしれません。でなければ作業を妨害しないので。

TechWatch