I’m encountering a persistent error when using Firebase Authentication in a React application built with Vite:

TypeScript

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

This error persists even though I believe I have correctly exported and re-exported auth.

Here’s the relevant code:

Name of file: 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 };

Name of file: 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';

Name of file: 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>
  );
}

I’ve tried the following to resolve this:

• Checked file paths multiple times.

• Ensured correct named imports (import { auth } from ...).

• Cleaned node_modules, package-lock.json, and restarted the development server multiple times.

• Verified the export/re-export structure.

My environment:

• Vite: (Run npm list vite ran and copy pasted below:)

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

  Node.js: (Run node -v ran and copy pasted below:)

  ~/project
  ❯ node -v
  v18.20.3
  

• OS: operating system: Windows, 11 pro. Chrome Browser.

Any help would be greatly appreciated!