Svelte集成Firebase Google OAuth失败，auth导出错误

在已有GitHub仓库的Svelte项目中，尝试在src/routes目录下创建页面集成Firebase Google OAuth功能，但构建失败，报错提示auth未被src/lib/firebase.js导出。尝试使用Firebase Compat也出现大量错误。

相关代码与报错信息 #

src/routes/about/+page.svelte代码 #

<!-- src/routes/about/+page.svelte -->
<script lang="ts">
  import { auth } from '$lib/firebase'; // Import Firebase auth from firebase.js

  async function signInWithGoogle() {
    const provider = new firebase.auth.GoogleAuthProvider();
    try {
      const result = await auth.signInWithPopup(provider);
      const user = result.user;
      // Redirect to localhost:4173 or handle the redirect as needed
      window.location.href = 'http://localhost:4173'; // Adjust the URL as needed
    } catch (error: any) {
      console.error('Firebase Authentication Error:', error.code, error.message);
    }
  }
</script>

<h1>About Page</h1>

<p>This is the about page.</p>

<button on:click={signInWithGoogle}>Sign in with Google</button>

终端错误信息 #

vite v5.2.9 building SSR bundle for production...
✓ 671 modules transformed.
x Build failed in 10.18s
error during build:
RollupError: src/routes/about/+page.svelte (3:11): "auth" is not exported by "src/lib/firebase.js", imported by "src/routes/about/+page.svelte".
file: C:/Users/admin/Documents/plinko-game/plinko-game-main/src/routes/about/+page.svelte:3:11
1: <!-- src/routes/about/+page.svelte -->
2: <script lang="ts">
3:   import { auth } from '$lib/firebase'; // Import Firebase auth from firebase.js
              ^
4: 
5:   async function signInWithGoogle() {
    at getRollupError (file:///C:/Users/admin/Documents/plinko-game/plinko-game-main/node_modules/.pnpm/rollup@4.14.3/node_modules/rollup/dist/es/shared/parseAst.js:392:41)
    at error (file:///C:/Users/admin/Documents/plinko-game/plinko-game-main/node_modules/.pnpm/rollup@4.14.3/node_modules/rollup/dist/es/shared/parseAst.js:388:42)
    at Module.error (file:///C:/Users/admin/Documents/plinko-game/plinko-game-main/node_modules/.pnpm/rollup@4.14.3/node_modules/rollup/dist/es/shared/node-entry.js:13688:16)
    at Module.traceVariable (file:///C:/Users/admin/Documents/plinko-game/plinko-game-main/node_modules/.pnpm/rollup@4.14.3/node_modules/rollup/dist/es/shared/node-entry.js:14136:29)
    at ModuleScope.findVariable (file:///C:/Users/admin/Documents/plinko-game/plinko-game-main/node_modules/.pnpm/rollup@4.14.3/node_modules/rollup/dist/es/shared/node-entry.js:11817:39)
    at ReturnValueScope.findVariable (file:///C:/Users/admin/Documents/plinko-game/plinko-game-main/node_modules/.pnpm/rollup@4.14.3/node_modules/rollup/dist/es/shared/node-entry.js:6037:38)
    at FunctionBodyScope.findVariable (file:///C:/Users/admin/Documents/plinko-game/plinko-game-main/node_modules/.pnpm/rollup@4.14.3/node_modules/rollup/dist/es/shared/node-entry.js:6037:38)
    at FunctionScope.findVariable (file:///C:/Users/admin/Documents/plinko-game/plinko-game-main/node_modules/.pnpm/rollup@4.14.3/node_modules/rollup/dist/es/shared/node-entry.js:6037:38)
    at FunctionBodyScope.findVariable (file:///C:/Users/admin/Documents/plinko-game/plinko-game-main/node_modules/.pnpm/rollup@4.14.3/node_modules/rollup/dist/es/shared/node-entry.js:6037:38)
    at BlockScope.findVariable (file:///C:/Users/admin/Documents/plinko-game/plinko-game-main/node_modules/.pnpm/rollup@4.14.3/node_modules/rollup/dist/es/shared/node-entry.js:6037:38)
 ELIFECYCLE  Command failed with exit code 1.

src/lib/firebase.js代码 #

// firebase.js

import firebase from 'firebase/app';
import 'firebase/auth';

const firebaseConfig = {
    apiKey: "AIzaSyAQsJwwdg10AN8h9JqrPClg7OuWSo",
    authDomain: "myapp.firebaseapp.com",
    databaseURL: "https://myapp-ault-rtdb.firebaseio.com",
    projectId: "myap",
    storageBucket: "myapp-4c.appspot.com",
    messagingSenderId: "926146820",
    appId: "1:926140906820:web:d0e3195d6eeea2ab11"
};

if (!firebase.apps.length) {
  firebase.initializeApp(firebaseConfig);
}

export default firebase;

问题核心是firebase.js仅导出了默认的Firebase实例，未单独导出auth对象，同时页面中直接使用了未导入的firebase全局变量。按以下步骤修改：

1. 修改src/lib/firebase.js，导出auth对象：

// firebase.js
import firebase from 'firebase/app';
import 'firebase/auth';

const firebaseConfig = {
    apiKey: "AIzaSyAQsJwwdg10AN8h9JqrPClg7OuWSo",
    authDomain: "myapp.firebaseapp.com",
    databaseURL: "https://myapp-ault-rtdb.firebaseio.com",
    projectId: "myap",
    storageBucket: "myapp-4c.appspot.com",
    messagingSenderId: "926146820",
    appId: "1:926140906820:web:d0e3195d6eeea2ab11"
};

if (!firebase.apps.length) {
  firebase.initializeApp(firebaseConfig);
}

// 新增导出auth对象
export const auth = firebase.auth();
export default firebase;

2. 修改页面代码，确保依赖导入正确：
   有两种可选方式：

方式一：导入完整Firebase实例创建Provider

<!-- src/routes/about/+page.svelte -->
<script lang="ts">
  import { auth } from '$lib/firebase'; 
  import firebase from '$lib/firebase'; // 导入Firebase实例

  async function signInWithGoogle() {
    const provider = new firebase.auth.GoogleAuthProvider();
    try {
      const result = await auth.signInWithPopup(provider);
      const user = result.user;
      window.location.href = 'http://localhost:4173';
    } catch (error: any) {
      console.error('Firebase Authentication Error:', error.code, error.message);
    }
  }
</script>

<h1>About Page</h1>

<p>This is the about page.</p>

<button on:click={signInWithGoogle}>Sign in with Google</button>

方式二：直接导入GoogleAuthProvider（更简洁）

<!-- src/routes/about/+page.svelte -->
<script lang="ts">
  import { auth } from '$lib/firebase'; 
  import { GoogleAuthProvider } from 'firebase/auth'; // 直接导入Provider

  async function signInWithGoogle() {
    const provider = new GoogleAuthProvider();
    try {
      const result = await auth.signInWithPopup(provider);
      const user = result.user;
      window.location.href = 'http://localhost:4173';
    } catch (error: any) {
      console.error('Firebase Authentication Error:', error.code, error.message);
    }
  }
</script>

<h1>About Page</h1>

<p>This is the about page.</p>

<button on:click={signInWithGoogle}>Sign in with Google</button>

修改完成后，构建错误会消失，Google OAuth功能可正常使用。

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