このエラーは、エラー文は頼りにならないことが多いみたい。

色々なことが原因で、最終的にこういうエラーを吐くことになっているだけなので
毎度、原因を探る作業が必要になりそう。

原因を探るためには、コメントアウトを繰り返し
原因箇所を特定するところから始める。

私の場合は

• Nginx の設定
• v-if の使い方（位置）

において、掲題のエラーが出た。

以下の記事を書いたのは、Nuxt に触りたての頃。

今振り返ってみると、その後、Nuxt インストール時に
このような現象は起きていないので
気のせいだったかも？

Nuxt2.15.2

yarn create nuxt-app hello

と普通にインストールしただけなのに
開発サーバを起動したら

というエラーが出た。

泣きそうになりながら 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 を有効に設定してみた。

server {
    listen       80;
    server_name  192.168.56.xxx;

+   proxy_http_version 1.1;
+   proxy_set_header Upgrade $http_upgrade;
+   proxy_set_header Connection "upgrade";

    location / {
        proxy_pass http://127.0.0.1:3000;
    }
}

これで確かに
@nuxt/content を同梱してインストールしても
件のエラーは出なくなった。

と、ここまで試行錯誤を繰り返した後で
公式に Nginx のリバースプロキシを利用する設定が載っているのを見つけた。
公式：NGINX Using NGINX as a reverse proxy

map $sent_http_content_type $expires {
    "text/html"                 epoch;
    "text/html; charset=utf-8"  epoch;
    default                     off;
}

server {
    listen          80;             # the port nginx is listening on
    server_name     your-domain;    # setup your domain here

    gzip            on;
    gzip_types      text/plain application/xml text/css application/javascript;
    gzip_min_length 1000;

    location / {
        expires $expires;

        proxy_redirect                      off;
        proxy_set_header Host               $host;
        proxy_set_header X-Real-IP          $remote_addr;
        proxy_set_header X-Forwarded-For    $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto  $scheme;
        proxy_read_timeout          1m;
        proxy_connect_timeout       1m;
        proxy_pass                          http://127.0.0.1:3000; # set the address of the Node.js instance here
    }
}

こちらで試したところ、件のエラーが出た。

そこで、前述の WebSocket を有効にする設定を加えた。

map $sent_http_content_type $expires {
    "text/html"                 epoch;
    "text/html; charset=utf-8"  epoch;
    default                     off;
}

server {
    listen          80;             # the port nginx is listening on
    server_name     your-domain;    # setup your domain here

    gzip            on;
    gzip_types      text/plain application/xml text/css application/javascript;
    gzip_min_length 1000;

+   proxy_http_version 1.1;
+   proxy_set_header Upgrade $http_upgrade;
+   proxy_set_header Connection "upgrade";

    location / {
        expires $expires;

        proxy_redirect                      off;
        proxy_set_header Host               $host;
        proxy_set_header X-Real-IP          $remote_addr;
        proxy_set_header X-Forwarded-For    $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto  $scheme;
        proxy_read_timeout          1m;
        proxy_connect_timeout       1m;
        proxy_pass                          http://127.0.0.1:3000; # set the address of the Node.js instance here
    }
}

エラーが出る。。。

curl http://localhost:3000/

と、直接アクセスしたときはエラーが出ないので
やっぱり Nginx の問題だと思われる。

location ディレクティブ内のリバースプロキシの設定をコメントアウトしてみた。

map $sent_http_content_type $expires {
    "text/html"                 epoch;
    "text/html; charset=utf-8"  epoch;
    default                     off;
}

server {
    listen          80;             # the port nginx is listening on
    server_name     your-domain;    # setup your domain here

    gzip            on;
    gzip_types      text/plain application/xml text/css application/javascript;
    gzip_min_length 1000;

+   proxy_http_version 1.1;
+   proxy_set_header Upgrade $http_upgrade;
+   proxy_set_header Connection "upgrade";

    location / {
        expires $expires;

#        proxy_redirect                      off;
#        proxy_set_header Host               $host;
#        proxy_set_header X-Real-IP          $remote_addr;
#        proxy_set_header X-Forwarded-For    $proxy_add_x_forwarded_for;
#        proxy_set_header X-Forwarded-Proto  $scheme;
#        proxy_read_timeout          1m;
#        proxy_connect_timeout       1m;
        proxy_pass                          http://127.0.0.1:3000; # set the address of the Node.js instance here
    }
}

エラーが出ない！

いっぱいコメントアウトしたので、選別をしたところ

map $sent_http_content_type $expires {
    "text/html"                 epoch;
    "text/html; charset=utf-8"  epoch;
    default                     off;
}

server {
    listen          80;             # the port nginx is listening on
    server_name     your-domain;    # setup your domain here

    gzip            on;
    gzip_types      text/plain application/xml text/css application/javascript;
    gzip_min_length 1000;

+   proxy_http_version 1.1;
+   proxy_set_header Upgrade $http_upgrade;
+   proxy_set_header Connection "upgrade";

    location / {
        expires $expires;

        proxy_redirect                      off;
#        proxy_set_header Host               $host;
#        proxy_set_header X-Real-IP          $remote_addr;
#        proxy_set_header X-Forwarded-For    $proxy_add_x_forwarded_for;
#        proxy_set_header X-Forwarded-Proto  $scheme;
        proxy_read_timeout          1m;
        proxy_connect_timeout       1m;
        proxy_pass                          http://127.0.0.1:3000; # set the address of the Node.js instance here
    }
}

これならエラーが出ない。
proxy_set_header があるとエラーが出ることが判明。

途方に暮れていたところ
なんとなく、proxy_set_header を location ディレクティブの外へ配置してみた。

map $sent_http_content_type $expires {
    "text/html"                 epoch;
    "text/html; charset=utf-8"  epoch;
    default                     off;
}

server {
    listen          80;             # the port nginx is listening on
    server_name     your-domain;    # setup your domain here

    gzip            on;
    gzip_types      text/plain application/xml text/css application/javascript;
    gzip_min_length 1000;

+   proxy_http_version 1.1;
+   proxy_set_header Upgrade $http_upgrade;
+   proxy_set_header Connection "upgrade";

+   proxy_set_header Host               $host;
+   proxy_set_header X-Real-IP          $remote_addr;
+   proxy_set_header X-Forwarded-For    $proxy_add_x_forwarded_for;
+   proxy_set_header X-Forwarded-Proto  $scheme;

    location / {
        expires $expires;

        proxy_redirect                      off;
        proxy_read_timeout          1m;
        proxy_connect_timeout       1m;
        proxy_pass                          http://127.0.0.1:3000; # set the address of the Node.js instance here
    }
}

エラーが出ない！

解決したとは思えないけど
疲れたので、アプリ側を実装するまで、一旦これでよしとする。。。

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 の仕様的に、確かアウトだったような。。。
そのせいか～ 🙄