React+ESNext+Vite配置下无法导入Amplify Auth的问题求助

大家好，最近我在基于React 19 + Vite的项目里，用AWS Amplify实现带MFA验证的登录页面，结果一运行项目就碰到了这个报错：

Uncaught SyntaxError: The requested module '/node_modules/.vite/deps/aws-amplify.js?v=47cd8d3b' does not provide an export named 'Auth' (at Login.jsx:2:10)

我一开始以为是Amplify的版本兼容问题，但看了package.json里的依赖版本，感觉主包和Auth子包的版本是匹配的啊？实在摸不着头脑，想请各位帮忙看看怎么修复这个问题。

我的package.json依赖配置 #

"dependencies": {
  "@aws-amplify/auth": "^6.13.1",
  "@aws-amplify/ui-react": "^6.11.2",
  "aws-amplify": "^6.15.1",
  "get-random-values": "^3.0.0",
  "react": "^19.1.0",
  "react-dom": "^19.1.0"
}

登录组件代码（错误出在Auth导入环节） #

报错就发生在导入Auth的那一行，下面是完整的登录组件代码：

import React, { useState } from 'react'
import { Auth } from 'aws-amplify' // 这行就是触发报错的代码

const LoginWithMFA = () => {
  const [email, setEmail] = useState('')
  const [password, setPassword] = useState('')
  const [mfaCode, setMfaCode] = useState('')
  const [message, setMessage] = useState('')
  const [showMfaInput, setShowMfaInput] = useState(false)
  const [user, setUser] = useState(null)

  const handleLogin = async () => {
    try {
      const signedInUser = await Auth.signIn(email, password)
      setUser(signedInUser)
      // 检查是否需要MFA验证
      if (signedInUser.challengeName === 'SMS_MFA') {
        setShowMfaInput(true)
        setMessage('需要MFA验证：请输入发送到您设备的验证码。')
      } else {
        setMessage('登录成功！')
      }
    } catch (error) {
      setMessage(`登录错误：${error.message}`)
    }
  }

  const handleVerifyMFA = async () => {
    try {
      await Auth.confirmSignIn(user, mfaCode, 'SMS_MFA')
      setMessage('MFA验证通过，登录成功！')
      setShowMfaInput(false)
    } catch (error) {
      setMessage(`MFA验证错误：${error.message}`)
    }
  }

  return (
    <div style={{ maxWidth: '400px', margin: 'auto', textAlign: 'center' }}>
      <h2>带MFA的登录</h2>
      {!showMfaInput ? (
        <>
          <input
            type="email"
            placeholder="邮箱"
            value={email}
            onChange={(e) => setEmail(e.target.value)}
            style={{ display: 'block', width: '100%', marginBottom: '10px' }}
          />
          <input
            type="password"
            placeholder="密码"
            value={password}
            onChange={(e) => setPassword(e.target.value)}
            style={{ display: 'block', width: '100%', marginBottom: '10px' }}
          />
          <button onClick={handleLogin}>登录</button>
        </>
      ) : (
        <>
          <input
            type="text"
            placeholder="MFA验证码"
            value={mfaCode}
            onChange={(e) => setMfaCode(e.target.value)}
            style={{ display: 'block', width: '100%', marginBottom: '10px' }}
          />
          <button onClick={handleVerifyMFA}>确认验证码</button>
        </>
      )}
      <p>{message}</p>
    </div>
  )
}

export default LoginWithMFA

我的Vite配置文件（vite.config.ts） #

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  optimizeDeps: {
    include: ['aws-amplify'],
  },
})

tsconfig.app.json配置 #

{
  "compilerOptions": {
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
    "target": "ES2022",
    "useDefineForClassFields": true,
    "lib": ["ES2022", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,
    /* Bundler mode */
    "allowImportingTsExtensions": true,
    "verbatimModuleSyntax": true,
    "moduleDetection": "force",
    "noEmit": true,
    "jsx": "react-jsx",
    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "erasableSyntaxOnly": true,
    "noFallthroughCasesInSwitch": true,
    "noUncheckedSideEffectImports": true,
    "composite": true,
    "allowSyntheticDefaultImports": true,
    "allowJs": true,
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "typeRoots": ["./node_modules/@types"],
    "moduleResolution": "Node"
  },
  "include": ["src", "vite.config.ts"]
}

我翻了Amplify v6的文档，感觉导入Auth的方式没错啊？会不会是Vite的依赖优化配置有问题？或者TypeScript的配置哪里冲突了？麻烦各位帮我排查下问题，谢谢啦！

内容来源于stack exchange