Firebase doesn’t work

[REQUIRED] Describe your environment

  • Operating System version: OS X
  • Browser version: doesn’t matter – its compile time warnings
  • Firebase SDK version: latest (8.3.0)
  • Firebase Product: init, auth, firestore – everything really

[REQUIRED] Describe the problem

I set up a fresh preact project, import firebase and it immediately takes a sh*t. Here’s the console log:

Compiled successfully!

You can view the application in browser.

Local:            http://0.0.0.0:8080
On Your Network:  http://10.196.35.140:8080
⚠ WARN ../node_modules/@firebase/component/dist/index.esm.js 242:26-39
"export '__spreadArray' was not found in 'tslib'
 @ ../node_modules/@firebase/app/dist/index.esm.js
 @ ../node_modules/firebase/app/dist/index.esm.js
 @ ./components/app.js
 @ ./index.js
 @ ../node_modules/preact-cli/lib/lib/entry.js
⚠ WARN ../node_modules/@firebase/component/dist/index.esm.js 242:40-53
"export '__spreadArray' was not found in 'tslib'
 @ ../node_modules/@firebase/app/dist/index.esm.js
 @ ../node_modules/firebase/app/dist/index.esm.js
 @ ./components/app.js
 @ ./index.js
 @ ../node_modules/preact-cli/lib/lib/entry.js

Steps to reproduce:

1. Environment Setup

# install preact-cli and create a project
$ npm install -g preact-cli
$ preact create default test

# add firebase
$ cd test
$ npm install --save firebase

2. Initialize firebase in the app

Add the init to the main app component src/components/app.js

import { h } from 'preact';
import { Router } from 'preact-router';
import { useEffect } from 'preact/hooks';
import firebase from "firebase/app";

import Header from './header';

// Code-splitting is automated for `routes` directory
import Home from '../routes/home';
import Profile from '../routes/profile';

const App = () => {
	// Initialize firebase
	useEffect(() => firebase.initializeApp({
		// Config goes here
	}), [])

	return <div id="app">
		<Header />
		<Router>
			<Home path="/" />
			<Profile path="/profile/" user="me" />
			<Profile path="/profile/:user" />
		</Router>
	</div>
}

export default App;

3. Give it a run

$ npm run dev

Relevant Code:

☝️See above

Notes

The project will still technically load in a browser until you do something meaty like import 'firebase/firestore'.
I’m pretty sure that the import issues are all related to this weird linking error I’m reporting, but I could be wrong.

4 thoughts on “Firebase doesn’t work

  1. I had the same problem with next.js and it was solved when I switch b the last version 8.2.9

    
    01:41:02.991 | Failed to compile.
    -- | --
    01:41:02.992 | ./node_modules/@firebase/firestore/dist/esm5/prebuilt-e065c69d-7a321be7.js
    01:41:02.992 | Attempted import error: '__spreadArray' is not exported from 'tslib' (imported as 'b').
    01:41:02.992 | > Build error occurred
    01:41:02.993 | Error: > Build failed because of webpack errors
    01:41:02.993 | at /vercel/workpath0/node_modules/next/dist/build/index.js:15:918
    01:41:02.993 | at async Span.traceAsyncFn (/vercel/workpath0/node_modules/next/dist/telemetry/trace/trace.js:5:584)
    
    
    
  2. I had the same problem, rolling back to 8.2.9 worked for me. Apparently, __spreadArray was introduced in tslib@2.1.0, but firebase still refers to tslib@2.0.1 on version 8.3.0, but tries to import __spreadArray.

  3. I was able to replicate this issue using version 8.3.0 and the warning disappeared when I rolled back the version to 8.2.9.

    I’ve filed a bug for this issue and tracked internally. I will keep you posted for any updates.