React与Vite环境下配置Amplify认证出现模块导出错误

使用的包版本 #

"@aws-amplify/ui-react": 4.2.0
"aws-amplify": 5.0.5

Main.jsx 代码 #

import Amplify from "aws-amplify"
import awsExports from "./aws-exports"
Amplify.configure(awsExports)

vite.config.js 代码 #

import { defineConfig } from 'vite'
import postcss from './postcss.config.js'
import react from '@vitejs/plugin-react'

export default defineConfig({
  define: {
    'process.env': process.env,
    'global': {}
  },
  css: {
    postcss,
  },
  plugins: [react()],
  resolve: {
    alias: [
      {
        find: /^~.+/,
        replacement: (val) => {
          return val.replace(/^~/, "");
        },
      },
      {
        find: './runtimeConfig', replacement: './runtimeConfig.browser',
      }
    ],
  },
  build: {
    commonjsOptions: {
      transformMixedEsModules: true,
    }
  } 
})

报错信息 #

运行 npm run dev 后应用崩溃，控制台报错：

Uncaught SyntaxError: The requested module '/node_modules/.vite/aws-amplify.js?v=d4f24853' does not provide an export named 'default' (at main.jsx:5:1)

解决方案 #

错误原因是 Amplify v5+ 采用 ES 模块的命名导出，不再支持默认导出。只需修改 Main.jsx 的导入方式：

import { Amplify } from "aws-amplify"
import awsExports from "./aws-exports"
Amplify.configure(awsExports)

另外可以检查 vite.config.js 中的配置，'global': {} 可保留，但 Amplify v5 对 Vite 兼容性已优化，若后续仍有模块问题，可尝试移除不必要的别名（比如 ./runtimeConfig 的别名可能不再需要），根据实际情况调整。

内容的提问来源于stack exchange，提问作者juanserna8