[svelte] src 외부 파일의 firebase 관련 함수 실행시 오류 해결

📜  문제 발생 배경

예시 프로젝트 구조

/project-root
├── /src
└── /sub_project
    └── index.ts -> save()

 

- src는 svelte 기본 프로젝트

- sub_project의 index.ts에서 firebase로 데이터를 저장하는 함수(save()) 보유

- sub_project는 스케쥴러로 돌리려고 따로 만든 프로젝트라서 단일로 실행하면 잘 되는 상태

 

이 상태에서 save() 함수를 svelte 프로젝트인 src 내부 컴포넌트에서 실행하면, 아래와 같은 오류가 발생하였습니다.

TypeError: Class extends value undefined is not a constructor or null
    at node_modules/firebase-admin/lib/utils/api-request.js (chunk-L7KXJSNS.js?v=f0a29e65:4034:59)
    at __require2 (chunk-7RP6IU3L.js?v=f0a29e65:16:50)
    at node_modules/firebase-admin/lib/app/credential-internal.js (chunk-L7KXJSNS.js?v=f0a29e65:25858:25)
    at __require2 (chunk-7RP6IU3L.js?v=f0a29e65:16:50)
    at node_modules/firebase-admin/lib/utils/index.js (chunk-L7KXJSNS.js?v=f0a29e65:26540:33)
    at __require2 (chunk-7RP6IU3L.js?v=f0a29e65:16:50)
    at node_modules/firebase-admin/lib/app/index.js (chunk-L7KXJSNS.js?v=f0a29e65:27012:19)
    at __require2 (chunk-7RP6IU3L.js?v=f0a29e65:16:50)
    at firebase-admin_app.js?v=f0a29e65:9:26

 

다른 문서들에서는 firebase의 앱 초기화가 중복되는 문제일 확률이 높다던데 중복되지 않게 처리하고 있어서 다른 근본적인 원인을 찾느라 헤매고 있었습니다.

 

 

 

💊 원인 분석 및 해결 방법

아무리 검토해 봐도 firebase 연결 상태나 초기화 중복 문제는 아니었기에 다른 원인을 생각해 봤습니다.

 

sub_project만 단일적으로 실행하면 잘 되는데, src에서는 sub_project 쪽 파일을 서버로 인식하지 않는다는 느낌을 받았습니다.

 

sub_project는 전체가 서버쪽 코드로 이루어져 있는데 svelte 쪽에서 실행하려 할 때는 클라이언트에서 서버 코드를 실행하려고 하니 firebase 오류가 나는 것이였습니다.

 

 

해결방법

import type { RequestEvent } from '@sveltejs/kit';
import { json } from '@sveltejs/kit';
import { save } from '$root/sub_project/index.ts';

export async function GET(event: RequestEvent) {
  const userID = event.url.searchParams.get('user_id') ?? '';
  const result = await save(userID);

  return json({ ...result });
}

 

sub_project 함수를 +server.ts 파일로 불러와서 사용할 수 있도록 처리하였더니 오류가 깔끔하게 해결되었습니다.

 

생각해보면 당연한 문제인데 파이어베이스 연동 오류라고만 생각해서 조금 헤매게 되었던 것 같습니다.

 

앞으로도 프레임워크의 동작 방식과 구조를 잘 이해하고 되새기며 개발해야겠습니다.