React with Vite 时 Firebase 身份验证导入错误（身份验证未导出）

Question

在使用 Vite 构建的 React 应用程序中使用 Firebase 身份验证时遇到持续错误：

打字稿

✘ [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';
        ╵          ~~~~

即使我相信我已正确导出并重新导出，此错误仍然存在

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：（运行

  npm list vite

  运行并复制粘贴在下面:)

  ~/project
  ❯ npm list vite
  [email protected] /home/project
  +-- @vitejs/[email protected]
  | `-- [email protected] deduped
  `-- [email protected]
  

  Node.js：（运行

  node -v

  运行并复制粘贴在下面:)

  ~/project
  ❯ node -v
  v18.20.3
  

• OS：操作系统：Windows、11 pro。 Chrome 浏览器。

任何帮助将不胜感激！

Answer 1

我猜这是一个路径错误，你可以尝试一下吗，

从 '../../lib/firebase/core' 导出 { auth }; // 显式包含该文件