Using Firebase with Deno Fresh throws an error on import

Viewed 39

I'm trying to build a test app using Fresh while following this tutorial on Deno Deploy and Firebase with Firestore and Auth.

~/main.ts:

/// <reference no-default-lib="true" />
/// <reference lib="dom" />
/// <reference lib="dom.iterable" />
/// <reference lib="dom.asynciterable" />
/// <reference lib="deno.ns" />

import { start } from '$fresh/server.ts';
import manifest from './fresh.gen.ts';

await start(manifest);

// XMLHttpRequest pollyfill
import 'https://deno.land/x/xhr@0.1.1/mod.ts';
import { installGlobals } from 'https://deno.land/x/virtualstorage@0.1.0/mod.ts';
installGlobals();
// Firebase imports
import firebase from 'https://cdn.skypack.dev/firebase@8.7.0/app';
import 'https://cdn.skypack.dev/firebase@8.7.0/auth';
import 'https://cdn.skypack.dev/firebase@8.7.0/firestore';
// Firebase configuration
const firebaseConfig = { ... }
const firebaseApp = firebase.initializeApp(firebaseConfig, 'example');
const auth = firebase.auth(firebaseApp);
const db = firebase.firestore(firebaseApp);

and without doing anything else beside importing dependencies and running the configuration, it throws the following errors:

Error importing firebase auth:

error: Uncaught (in promise) TypeError: Cannot read properties of null (reading 'INTERNAL')
    at Ke (https://cdn.skypack.dev/-/@firebase/auth@v0.16.8-fuIw7Baswv7gZ8Si3voa/dist=es2019,mode=imports/optimized/@firebase/auth.js:2184:21)
    at new Ze (https://cdn.skypack.dev/-/@firebase/auth@v0.16.8-fuIw7Baswv7gZ8Si3voa/dist=es2019,mode=imports/optimized/@firebase/auth.js:2310:9)
    at https://cdn.skypack.dev/-/@firebase/auth@v0.16.8-fuIw7Baswv7gZ8Si3voa/dist=es2019,mode=imports/optimized/@firebase/auth.js:3835:32
    at https://cdn.skypack.dev/-/@firebase/auth@v0.16.8-fuIw7Baswv7gZ8Si3voa/dist=es2019,mode=imports/optimized/@firebase/auth.js:8108:4

Error importing firebase firestore:

error: Uncaught (in promise) TypeError: Cannot read properties of null (reading 'INTERNAL')
    e3.INTERNAL.registerComponent(new Component("firestore", function(e4) {
       ^
    at https://cdn.skypack.dev/-/@firebase/firestore@v2.3.8-7gekwIXeA2YXJh4nbMEY/dist=es2019,mode=imports/optimized/@firebase/firestore.js:11891:8
    at d (https://cdn.skypack.dev/-/@firebase/firestore@v2.3.8-7gekwIXeA2YXJh4nbMEY/dist=es2019,mode=imports/optimized/@firebase/firestore.js:11895:4)
    at https://cdn.skypack.dev/-/@firebase/firestore@v2.3.8-7gekwIXeA2YXJh4nbMEY/dist=es2019,mode=imports/optimized/@firebase/firestore.js:11899:1

I'm also wondering if this should be even inside main.ts, I would really like to implement it correctly.


0 Answers
Related