Firebase doesn't work (original) (raw)
[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
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.