(Vue3+)Vite+Amplifyで開発したらbuildでエラーになった話

# はじめに
フロントエンドエンジニアをやっておりますbakupenです。
開発は主にVue2を使っていたのですが、最近のプロジェクトでは初めてVue3を使いました。


Vue3ではせっかくなのでViteを導入してみました。
vue-cliに比べて動作がかなり早いですね。もうvue-cliには戻れません、、

て感じで快適に開発していたのですが、そろそろホスティングしてみっか〜と思ってbuildコマンドを打ってみたところエラーが出てめちゃめちゃハマったので共有したいと思います。
解決もできたのでよければ参考にしてください。

# バージョンなど
- node: v16.15.0
- npm: 8.7.0
- vue: 3.2.25
- vite: 2.9.9
- vuetify: 3.0.0-beta.0
    - cssライブラリです。なかなかBetaから動きがない。
- aws-amplify: 4.3.31
    - aws cliをjsからいい感じに叩けるライブラリです。
    - 詳しい使い方などは、手前味噌ですが[こちら](qiita.com/bakupen/items/f86a0eee515b9502e265)を参照ください。

# buildしたらエラーになった！
開発の動作確認で`npm run serve`を実行し、全く問題なく動いていたのですが、
ビルドコマンド`npm run build`を叩くとこんなメッセージが表示されました。

```bash
$ npm run build

 vite-project@0.0.0 build
> vite build

vite v3.0.9 building for production...
✓ 23 modules transformed.
Unexpected token (Note that you need plugins to import files that are not JavaScript)
file: /Users/***/vite-project/node_modules/vuetify/lib/composables/theme.mjs:244:4
242:     themeClasses,
243:     styles,
244:     global: {
         ^
245:       name,
246:       current
error during build:
Error: Unexpected token (Note that you need plugins to import files that are not JavaScript)
    at error (file:///Users/***/vite-project/node_modules/rollup/dist/es/shared/rollup.js:1858:30)
    at Module.error (file:///Users/***/vite-project/node_modules/rollup/dist/es/shared/rollup.js:12412:16)
    at Module.tryParse (file:///Users/***/vite-project/node_modules/rollup/dist/es/shared/rollup.js:12789:25)
    at Module.setSource (file:///Users/***/vite-project/node_modules/rollup/dist/es/shared/rollup.js:12694:24)
    at ModuleLoader.addModuleSource (file:///Users/***/vite-project/node_modules/rollup/dist/es/shared/rollup.js:22136:20)
```

### 解決策
vite.config.js内で書いてるグローバル変数の書き方を変える

```vite.config.js
export default defineConfig({
  plugins: ...,
  server: ...,
  define: {
    global: {},
  },
});
```
↓
```vite.config.js
export default defineConfig({
  plugins: ...,
  server: ...,
  define: {
    "window.global": {},
  },
});
```

AmplifyとVite(のbuildで動くesbuild)の相性に問題があるです。
参考になったのは[こちらのissue](https://github.com/nuxt/framework/issues/4916)と[こちらのissue](https://github.com/nuxt/framework/discussions/2308#discussioncomment-2766426)。

# なんか違うエラーが出た！
上記の対応をして再度buildしたところ今度はこちらのエラーになりました。

```bash
$ npm run build

> postfor-frontend-vue3@0.0.0 build
> vite build

vite v2.9.14 building for production...
transforming (363) node_modules/vuetify/lib/components/VImg/VImg.css[@vue/compiler-sfc] the >>> and /deep/ combinators have been deprecated. Use :deep() instead.

✓ 2242 modules transformed.
'request' is not exported by __vite-browser-external, imported by node_modules/@aws-sdk/credential-provider-imds/dist/es/remoteProvider/httpRequest.js
file: /Users/***/vite-project/node_modules/@aws-sdk/credential-provider-imds/dist/es/remoteProvider/httpRequest.js:4:9
2: import { ProviderError } from "@aws-sdk/property-provider";
3: import { Buffer } from "buffer";
4: import { request } from "http";
            ^
5: /**
6:  * @internal
error during build:
Error: 'request' is not exported by __vite-browser-external, imported by node_modules/@aws-sdk/credential-provider-imds/dist/es/remoteProvider/httpRequest.js
    at error (/Users/***/vite-project/node_modules/rollup/dist/shared/rollup.js:198:30)
    at Module.error (/Users/***/vite-project/node_modules/rollup/dist/shared/rollup.js:12543:16)
    at Module.traceVariable (/Users/***/vite-project/node_modules/rollup/dist/shared/rollup.js:12902:29)
    at ModuleScope.findVariable (/Users/***/vite-project/node_modules/rollup/dist/shared/rollup.js:11554:39)
    at FunctionScope.findVariable (/Users/***/vite-project/node_modules/rollup/dist/shared/rollup.js:6486:38)
    at ChildScope.findVariable (/Users/***/vite-project/node_modules/rollup/dist/shared/rollup.js:6486:38)
    at FunctionScope.findVariable (/Users/***/vite-project/node_modules/rollup/dist/shared/rollup.js:6486:38)
    at ChildScope.findVariable (/Users/***/vite-project/node_modules/rollup/dist/shared/rollup.js:6486:38)
    at Identifier.bind (/Users/***/vite-project/node_modules/rollup/dist/shared/rollup.js:7553:40)
```

### 解決策
vite.config.js内に以下の記述を追加

```vite.config.js
export default defineConfig({
  resolve: {
    alias: {
      "./runtimeConfig": "./runtimeConfig.browser",
    },
  },
```


# まとめ

今回わかったことは、AWS AmplifyとViteの相性が悪そうだということでした。
Amplifyはissueでバグ直して〜と言われても対応してくれない印象があります…とても便利なので使わないわけにはいかないんですが。

あとで調べたところ、似たような対応が[AmplifyUI](https://ui.docs.amplify.aws/vue/getting-started/troubleshooting)のドキュメントに書いてありました。
>When working with a Vite project you must make a few modifications. Please follow the steps below.

UIは使っていないので読んでなかったですね…。