ERROR Cannot read property ‘toLowerCase’ of undefined

Posted by muchag | 未分類 |
初回投稿:2021-03-05 (金) 18:30:39 | 最終更新:2021-03-05 (金) 18:30:39

【環境】
create-nuxt-app: 3.5.2
Nuxt.js: 2.15.2
Vue.js: 2.6.12
Node.js: 12.18.2
Windows: 10 Pro
エラー

yarn create nuxt-app hello

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

ERROR Cannot read property ‘toLowerCase’ of undefined 11:19:35

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 + エラーメッセージ

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 が原因っぽいことが書いてあったので
試しに、@nuxt/content を外してインストールしてみると
確かに件のエラーが出ない。

原因その1

更に読み進めると
GitHub:Nginx の WebSocket を有効にすると問題が解消される(2020-10-16)
との返信を見つけた。

解決その1

そこで
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 有効化

そこで、前述の 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
    }
}

エラーが出ない!

proxy_set_header

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


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 があるとエラーが出ることが判明。

リバースプロキシを location の外へ

途方に暮れていたところ
なんとなく、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
    }
}

エラーが出ない!

解決その2???

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

参考サイト

GitHub:Websocket error using alternative server framework(2020-06-14)

PLEASE SLEEP:nginx の proxy_set_header の継承ではまった(2013-05-18)
-> 調査の過程でこんな記事も見つけたので、一応メモ。古い記事なので、今は仕様が変わっているかも

Posted by muchag | 未分類 |
初回投稿:2021-03-05 (金) 18:30:39 | 最終更新:2021-03-05 (金) 18:30:39

インストール -> 8.0.18

Posted by muchag | 未分類 |
初回投稿:2019-11-05 (火) 18:35:39 | 最終更新:2019-11-05 (火) 20:07:17

【環境】
MySQL: 8.0.15
Windows: 10 Pro 64bit
DL

公式:MySQL Community Downloads
から DL。

2019-11-05 現在
mysql-installer-community-8.0.18.0.msi
(Web 版は避けた)

Windows (x86, 32-bit), MSI Installer と書かれていたけど
公式:MySQL Community Downloads
こちらでは、Windows (x86, 32 & 64-bit), MSI Installer と書かれているので、
64bit もこれでよさそう。

また、DL しようとすると、Oracle アカウントについて聞かれるけど
[No thnaks, just start my download.] というリンクから、アカウントなしで DL できる。

インストール
  1. mysql-installer-community-8.0.18.0.msi ダブルクリック
  2. 「License Agreement」ダイアログは存在しなかった
  3. 「Choosing a Setup Type」ダイアログ
    1. [Developer Default] を選択
    2. [Next]
  4. 「Check Requirements」ダイアログ
    1. インストールするのに、要件を満たしていないものが列挙されているらしい
    2. MySQL For Excel 1.3.8:Visual Studio 2010 Tools for Office Runtime is not installed
    3. Connector/Python 8.0.18:Python (64-bit) is not installed
    4. ひとまずスルーして [Next]
    5. 継続警告ダイアログが出るので [Yes]
  5. 「Installation」ダイアログ
    1. [Execute]
    2. インストールが完了したら [Next]
  6. 「Product Configuration」ダイアログ
    1. [Next]
  7. 「High Availability」ダイアログ
    1. [Standalon MySQL Server / Classic MySQL Replication] を選択
    2. [Next]
  8. 「Type and Networking」ダイアログ
    1. デフォルトのまま
    2. [Next]
  9. 「Authentication Method」ダイアログ
    1. デフォルトのまま
    2. [Next]
  10. 「Accounts and Roles」ダイアログ
    1. MySQL Root Password:任意
    2. Repeat Password:上記と同一のもの
    3. [Next]
  11. 「Windows Service」ダイアログ
    1. [Configure MySQL Server as a Windows Service] にチェック
    2. Windows Service Name:MySQL8018
    3. [Start the MySQL Server at System Startup] のチェックを外す
    4. [Next]
  12. 「Apply Configuration」ダイアログ
    1. [Execute]
    2. [Finish]
  13. 「Product Configuration」ダイアログ
    1. [Next]
  14. 「MySQL Router Configuration」ダイアログ
    1. [Finish]
  15. 「Product Configuration」ダイアログ
    1. [Next]
  16. 「Connect to Server」ダイアログ
    1. Password:先程のもの
    2. [Check]
    3. [Next]
  17. 「Apply Configuration」ダイアログ
    1. [Execute]
    2. [Finish]
  18. 「Product Configuration」ダイアログ
    1. [Next]
  19. 「Installation Complete」ダイアログ
    1. [Finish]
インストール先

大概のアプリが、インストールウィザード内で
インストール先の選択があるけれど
MySQL には、それがなかったので、ちょっと焦った。

インストール先は、こちら。

C:\Program Files\MySQL

Shell

C:\Program Files\MySQL\MySQL Shell 8.0\bin\mysqlsh.exe

MySQLWorkbench

C:\Program Files\MySQL\MySQL Workbench 8.0 CE\MySQLWorkbench.exe
環境変数

環境変数

C:\Program Files\MySQL\MySQL Server 8.0\bin
動作確認

コマンドプロンプトを開く。

サービス

コマンドプロンプトを管理者権限で実行。


// 開始
net start mywql8018

// 終了
net stop mywql8018
接続
mysql -u root -p
Enter password: **********
Welcome to the MySQL monitor.  Commands end with ; or \g.
Your MySQL connection id is 15
Server version: 8.0.18 MySQL Community Server - GPL

Copyright (c) 2000, 2019, Oracle and/or its affiliates. All rights reserved.

Oracle is a registered trademark of Oracle Corporation and/or its
affiliates. Other names may be trademarks of their respective
owners.

Type 'help;' or '\h' for help. Type '\c' to clear the current input statement.
タイムゾーン

タイムゾーン

設定
C:\ProgramData\MySQL\MySQL Server 8.0\my.ini

こちらをバックアップを取ってから、下記に従って追記。
my.cnf 8.0.x

参考サイト

DBOnline:MySQL Community Server 8.0.15のインストール

ProEngineer:MySQLのダウンロード&インストールと初期設定方法(2019-09-27)

Posted by muchag | 未分類 |
初回投稿:2019-11-05 (火) 18:35:39 | 最終更新:2019-11-05 (火) 20:07:17

Vue Carousel

Posted by muchag | 未分類 |
初回投稿:2018-11-22 (木) 20:53:28 | 最終更新:2018-11-22 (木) 20:53:28


公式:Vue Carousel Guide API Examples

【環境】
Vue Carousel: 0.16.0-rc2
Vue.js: 2.9.6
monaca CLI: 3.0.3
OS: Windows10 Pro 64bit
インストール

npm install -S vue-carousel
書式
グローバル

グローバルの場合、ではなくて
グローバルで下記のように記述。

main.js

import Vue from 'vue';
import VueCarousel from 'vue-carousel';

Vue.use(VueCarousel);
ローカル

ローカルの場合、ではなくて
利用する .vue ファイルに記述。

Hoge.vue

import { Carousel, Slide } from 'vue-carousel';
export default {
  ...
  components: {
    Carousel,
    Slide
  }
  ...
};
テンプレート

設定

carousel タグの属性として記述。
公式:API


;(セミコロン)を付けないと、「文字列だぞ!」と怒られる。

スタイル

/* ナビゲーションも含めたカルーセル全体 */
section.VueCarousel {
}

/* スライド全体 */
div.VueCarousel-wrapper {
}
div.VueCarousel-inner {
}

/* スライド個体 */
div.VueCarousel-slide {
}

現在のところ、div.VueCarousel-wrapper と div.VueCarousel-inner が
なぜ親子になっているのか不明。

Posted by muchag | 未分類 |
初回投稿:2018-11-22 (木) 20:53:28 | 最終更新:2018-11-22 (木) 20:53:28

このブログについて

Posted by muchag | 未分類 |
初回投稿:2007-03-01 (木) 2:33:38 | 最終更新:2016-01-28 (木) 10:32:52

このブログは、爺による「備忘録」です。
言葉の使い方をはじめ、間違っていることも多々あるかもしれません。
あくまでも「備忘録」ですので、これのブログを見て「怒っちゃやーよ!」

自己責任にて閲覧してくださいね
Posted by muchag | 未分類 |
初回投稿:2007-03-01 (木) 2:33:38 | 最終更新:2016-01-28 (木) 10:32:52