Vite+React中Firebase Authentication导入错误：auth未导出

错误信息 #

✘ [ERROR] No matching export in "src/services/auth.ts" for import "auth"

    src/services/profile/auth.service.ts:2:9:
      2 │ import { auth } from '../auth';
        ╵          ~~~~

相关代码 #

src/lib/firebase/core.ts #

import { initializeApp } from 'firebase/app';
import { getFirestore } from 'firebase/firestore';
import { getAuth } from 'firebase/auth';
import { firebaseConfig } from '../../config/firebase.config';


// Initialize Firebase services
const app = initializeApp(firebaseConfig);
const db = getFirestore(app);
const auth = getAuth(app);

export { app, db, auth };

src/services/auth/index.ts #

export { auth } from '../../lib/firebase';
export { signIn } from './sign-in';
export { signUp } from './sign-up';
export { signOut } from './sign-out';
export { resendVerificationEmail } from './verification';
export { AuthError } from './errors';
export type { User, SignUpInput, SignInInput } from './types';
export { validateSignUp, validateSignIn } from './validation';

src/components/ProfilePage/EmailVerification.tsx #

import React, { useState } from 'react';
import { resendVerificationEmail } from '../services/auth';
import { Mail } from 'lucide-react';

interface EmailVerificationProps {
  email: string;
}

export function EmailVerification({ email }: EmailVerificationProps) {
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [success, setSuccess] = useState<string | null>(null);

  const handleResendEmail = async () => {
    setLoading(true);
    setError(null);
    setSuccess(null);

    try {
      await resendVerificationEmail();
      setSuccess('Verification email sent! Please check your inbox.');
    } catch (err) {
      setError('Failed to send verification email. Please try again later.');
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="max-w-md mx-auto bg-white p-8 rounded-lg shadow-sm">
      <div className="text-center mb-6">
        <div className="inline-flex items-center justify-center w-12 h-12 bg-blue-100 rounded-full mb-4">
          <Mail className="w-6 h-6 text-blue-600" />
        </div>
        <h2 className="text-2xl font-bold mb-2">Verify Your Email</h2>
        <p className="text-gray-600">
          We've sent a verification email to:
          <br />
          <span className="font-medium">{email}</span>
        </p>
      </div>

      {error && (
        <div className="mb-4 p-3 bg-red-50 border border-red-200 rounded-md">
          <p className="text-red-600 text-sm">{error}</p>
        </div>
      )}

      {success && (
        <div className="mb-4 p-3 bg-green-50 border border-green-200 rounded-md">
          <p className="text-green-600 text-sm">{success}</p>
        </div>
      )}

      <div className="space-y-4">
        <p className="text-sm text-gray-600">
          Please check your email and click the verification link to continue.
          If you don't see the email, check your spam folder.
        </p>

        <button
          onClick={handleResendEmail}
          disabled={loading}
          className="w-full bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
        >
          {loading ? 'Sending...' : 'Resend Verification Email'}
        </button>

        <p className="text-xs text-gray-500 text-center">
          You can close this window after verifying your email.
          The app will update automatically.
        </p>
      </div>
    </div>
  );
}

已尝试的解决方法 #

• 多次检查文件路径
• 确保使用正确的命名导入（import { auth } from ...）
• 清理node_modules、package-lock.json并多次重启开发服务器
• 验证导出/重导出结构

开发环境 #

• Vite：5.4.8
• Node.js：v18.20.3
• 操作系统：Windows 11 Pro，浏览器为Chrome

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