Firebase doesn't work

[marksalpeter]

[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.

[mhesham32]

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)

[marksalpeter]

Thanks @mhesham32! I’m on version 8.3.0. I’ll try rolling back to 8.2.9 and see if that helps.

[apurvamistry]

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.

[looptheloop88]

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.

[hsubox76]

I upgraded tslib deps to ^2.1.0 and this was released in 8.3.1. Let me know if it's still a problem.