🐛

Nuxt3(Vite)とAmplifyの噛み合わせで起こるバグとその解決

2022/11/10に公開約1,700字

はじめに

Vite使ってますか? Amplify使ってますか?
バグに見舞われてますか?

様々なissueや記事を見る限り、まだまだViteとAmplifyの相性が悪いみたいですね。
筆者はNuxt3で再現したバグですが、Nuxt2(Vite)、Vue(Vite)、React(Vite)でも再現する可能性があると考えています。(参考に貼ってある記事を見る限り)
Vue、Reactをお使いの方は nuxt.config.tsvite.config.ts に置き換えて読んでみてください。

以下戦いの備忘録です。

筆者の環境:

package.json
"devDependencies": {
  "nuxt": "3.0.0-rc.11"
},
"dependencies": {
  "@aws-amplify/api": "^4.0.59",
  "@aws-amplify/auth": "^4.6.12",
  "@aws-amplify/core": "^4.7.10",
}

npm run dev が失敗する

ローカルサーバ起動時 Uncaught ReferenceError: global is not defined が発生する。

nuxt.config.ts のviteオプションで window.global を定義してやればOK。

nuxt.config.ts
vite: {
  // これ書かないと npm run dev 失敗する
  define: {
    'window.global': {}
}

npx nuxi build が失敗する

プロダクションビルド時、以下のエラーが発生する。

'request' is not exported by __vite-browser-external, imported by node_modules/@aws-sdk/credential-provider-imds/dist/es/remoteProvider/httpRequest.js

同じくnuxt.config.ts のviteオプションでresolve aliasしてあげる。

nuxt.config.ts
vite: {
  // これ書かないと npx nuxi build 失敗する
  resolve: {
    alias: {
      './runtimeConfig': './runtimeConfig.browser'
    }
  }
}

おわりに

Vite + Amplifyでの開発中にバグが発生し次第次のスクラップに追記していきます。
https://zenn.dev/aoito/scraps/80a900b3cdbca7

参考

npm run dev

https://github.com/nuxt/framework/discussions/2308#discussioncomment-2582519

nuxi build

https://zenn.dev/link/comments/a94f51eebcff22
https://stackoverflow.com/questions/70938763/build-problem-with-react-vitejs-and-was-amplify
https://zenn.dev/longbridge/articles/0285863192edcd#vite-で-productionビルド時のエラーを解消する

Discussion

ログインするとコメントできます