🐛
Nuxt3（Vite）とAmplifyの噛み合わせで起こるバグとその解決
はじめに
Vite使ってますか？ Amplify使ってますか？
バグに見舞われてますか？
様々なissueや記事を見る限り、まだまだViteとAmplifyの相性が悪いみたいですね。
筆者はNuxt3で再現したバグですが、Nuxt2（Vite）、Vue（Vite）、React（Vite）でも再現する可能性があると考えています。（参考に貼ってある記事を見る限り）
Vue、Reactをお使いの方は nuxt.config.ts を vite.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での開発中にバグが発生し次第次のスクラップに追記していきます。
参考
npm run dev
nuxi build
Discussion