ERROR Cannot read property ‘toLowerCase’ of undefined
create-nuxt-app: 3.5.2
Nuxt.js: 2.15.2
-> 2.15.4
Vue.js: 2.6.12
Node.js: 12.18.2
-> 14.16.1
このエラーは、エラー文は頼りにならないことが多いみたい。
色々なことが原因で、最終的にこういうエラーを吐くことになっているだけなので
毎度、原因を探る作業が必要になりそう。
原因を探るためには、コメントアウトを繰り返し
原因箇所を特定するところから始める。
私の場合は
において、掲題のエラーが出た。
以下の記事を書いたのは、Nuxt に触りたての頃。
今振り返ってみると、その後、Nuxt インストール時に
このような現象は起きていないので
気のせいだったかも?
Nuxt2.15.2
と普通にインストールしただけなのに
開発サーバを起動したら
at WebSocketServer.handleUpgrade (node_modules/ws/lib/websocket-server.js:193:27)
at WS.handleUpgrade (node_modules/@nuxt/content/lib/ws.js:21:21)
at WS.serve (node_modules/@nuxt/content/lib/ws.js:17:10)
at node_modules/@nuxt/content/lib/middleware.js:12:15
at call (node_modules/connect/index.js:239:7)
at next (node_modules/connect/index.js:183:5)
at next (node_modules/connect/index.js:161:14)
at next (node_modules/connect/index.js:161:14)
at WebpackBundler.middleware (node_modules/@nuxt/webpack/dist/webpack.js:2192:5)
というエラーが出た。
泣きそうになりながら Google 先生へ質問してみた。
nuxt Cannot read property ‘toLowerCase’ of undefined
こちらで検索したところ
GitHub:Cannot read property toLowerCase of undefined(2019-07-24)
Qiita:Cannot read property ‘toLowerCase’ of undefinedのとき何を確認すべきか?(2020-12-09)
などが上位にでてきたんだけど
いずれもコーディングミスを原因とするもの。
- HTML の記述ミス
- SSR の問題?(よく理解できなかった)
- javascript による undefine オブジェクトへの参照
どれも新規 Nuxt.js プロジェクトにはありえないので
検索ワードを変更してみることにした。
上記エラーメッセージを引き起こしているファイル名を入れてみた。
WebpackBundler.middleware Cannot read property ‘toLowerCase’ of undefined
で検索すると、WebSocket に関わる記事が最初に出てきた。
中を見ると、エラーメッセージが全く同じ!
途中 @nuxt/content が原因っぽいことが書いてあったので
試しに、@nuxt/content を外してインストールしてみると
確かに件のエラーが出ない。
更に読み進めると
GitHub:Nginx の WebSocket を有効にすると問題が解消される(2020-10-16)
との返信を見つけた。
そこで
Qiita:NginxのリバースプロキシでWebソケットを通す際の設定(2019-12-28)
こちらを参考に、Nginx において WebSocket を有効に設定してみた。
これで確かに
@nuxt/content を同梱してインストールしても
件のエラーは出なくなった。
と、ここまで試行錯誤を繰り返した後で
公式に Nginx のリバースプロキシを利用する設定が載っているのを見つけた。
公式:NGINX Using NGINX as a reverse proxy
こちらで試したところ、件のエラーが出た。
そこで、前述の WebSocket を有効にする設定を加えた。
エラーが出る。。。
と、直接アクセスしたときはエラーが出ないので
やっぱり Nginx の問題だと思われる。
location ディレクティブ内のリバースプロキシの設定をコメントアウトしてみた。
エラーが出ない!
いっぱいコメントアウトしたので、選別をしたところ
これならエラーが出ない。
proxy_set_header があるとエラーが出ることが判明。
途方に暮れていたところ
なんとなく、proxy_set_header を location ディレクティブの外へ配置してみた。
エラーが出ない!
解決したとは思えないけど
疲れたので、アプリ側を実装するまで、一旦これでよしとする。。。
GitHub:Websocket error using alternative server framework(2020-06-14)
PLEASE SLEEP:nginx の proxy_set_header の継承ではまった(2013-05-18)
-> 調査の過程でこんな記事も見つけたので、一応メモ。古い記事なので、今は仕様が変わっているかも
久しぶりにこのエラーに遭遇した。
前回と文言が異なるのは、Nuxt の仕様変更かしらね?
コメントアウトを繰り返し、箇所を特定したところ
ここだった。
とりあえず一個上のDOMにv-ifを移動して解決。
ハッカーになりたい!:Nuxt.jsの$route.pathは$nuxt.$route.pathを使え!(2018-09-04)
という記事を見かけたので
こうしたら、エラーが出なくなった。
言われてみれば、元のコードだと
template 直下に v-if が仕込まれているので
状況によっては、template 内が空になるコードとなっている。
これは Nuxt の仕様的に、確かアウトだったような。。。
そのせいか~