vue+aws amplifyのプロジェクトをviteで立ち上げたら表示が消えた(global is not defined) #Vue.js

作成日: 2022/08/30

TL;DR

viteでdev serverを立ち上げてlocalhostにアクセスした時にglobal is not definedが出たらindex.htmlに<script>window.global　= window;</script>を追加する。

以下詳細

実行環境

aws-amplify@4.3.33
vue@3.2.37
vite@3.0.9
vitejs/plugin-vue@3.0.3
vitest@0.21.1

何があったのか

npm init vue@latestでviteを使用するプロジェクトを作成後にnpm run devをするとviteで開発用のサーバーが立ち上がり、本来は以下のような画面が表示されます。

その後、aws amplifyを使用するためにnpm install aws-amplifyして再びnpm run devするとviteのサーバーは問題なく立ち上がるものの、ブラウザは真っ黒になり、コンソールに以下のようなエラーが出ました。

Uncaught ReferenceError: global is not defined
    at node_modules/amazon-cognito-identity-js/node_modules/buffer/index.js (index.js:43:30)
    at __require2 (chunk-IKJM6GHQ.js?v=a6d83f4a:18:50)
    at AuthenticationHelper.js:5:24

なぜこうなるのか？

webpackの使用を想定した一部のライブラリではグローバルオブジェクトとしてglobalが使用されていますが、viteでは定義していないので、別途window.globalを定義する必要があるそうです。

どう解決する？

index.htmlの中に以下を記述する。

  <script>
    window.global　= window;
  </script>

jsはjsで纏めたた方が綺麗そう？とは思うものの、index.html以外でちゃんと動作する場所が見つけられませんでした。

余談

windowとかglobalとかよくわからなかったので、ついでに調べてみました。

windowとは

ブラウザでjavascriptを実行した時に、グローバルなオブジェクトが所属するオブジェクトだそうです。例えば、varで変数を宣言すると、windowオブジェクトのプロパティとしてその変数にアクセスすることができます。

var test = 1;
window.test === test;
> true

(※letやconstで宣言されたものはブロックスコープで、windowオブジェクトのプロパティにはならない)

window.globalとは

MDNによると、

Node.js で実行されるスクリプトの場合、 global と呼ばれるオブジェクトがグローバルオブジェクトになります。

だそうです。

webpackのdev-serverがnodeをrequiredとしているので、
倣ってwebpackでもグローバルオブジェクトはglobalになっているものと考えられます(webpackのgithubを見てみたりしたものの、自分の知識ではどこで定義されてるのかはよくわかりませんでした。node側なんでしょうか)。