sapper with firebase - fetch not defined - firebase

I am getting this error when running npm run dev
registerFunctions(firebase$1, fetch.bind(self));
^
ReferenceError: fetch is not defined
I figured rxfire doesn't import fetch, so I add this line to src/server.ts
global['fetch'] = require('node-fetch');
And the error is still there, any suggestions? I would think I would not have to add this at all.
I am just using rxfire in a src/firebase.ts file like so:
import firebase from "firebase/app";
import "firebase/auth";
import "firebase/firestore";
import "firebase/functions";
import * as config from "./config.json";
firebase.initializeApp(config);
export const auth = firebase.auth();
export const googleProvider = new firebase.auth.GoogleAuthProvider();
export const db = firebase.firestore();
export const functions = firebase.functions();
Thanks,
J

This was a specific error caused when trying to import "firebase/functions" on the server end in my firebase.ts file.
I was able to solve it by adding import 'isomorphic-unfetch' to server.ts. However, then I got this error:
registerFunctions(firebase$1, fetch.bind(self));
^
ReferenceError: self is not defined
I realized there apparently is no object to bind to on the backend, so I found a work around. I needed to not import it on the backend, which was a bigger Sapper Firebase problem.
See my post here for complete fix.

I had similar issue with this error stacktrace :
ReferenceError: fetch is not defined
at Module.<anonymous> (/var/task/webpack:/Users/dev/projects/node_modules/#firebase/functions/dist/index.esm.js:702:27)
at __webpack_require__ (/var/task/webpack:/webpack/bootstrap:19:1)
at /var/task/webpack:/webpack/bootstrap:83:1
at Object.<anonymous> (/var/task/families.js:87:10)
at Module._compile (internal/modules/cjs/loader.js:1072:14)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1101:10)
at Module.load (internal/modules/cjs/loader.js:937:32)
at Function.Module._load (internal/modules/cjs/loader.js:778:12)
at Module.require (internal/modules/cjs/loader.js:961:19)
at Module._require.i.require (/var/task/serverless_sdk/index.js:9:73397)
I solve it by updating the firebase import to
import * as admin from 'firebase-admin';
import firebase from 'firebase/app';

first install whatwg-fetch.
npm i --save whatwg-fetch yarn add --save whatwg-fetch pnpm i --save whatwg-fetch
create a file ./define-self.js
with this content
var global =
(typeof globalThis !== "undefined" && globalThis) ||
(typeof self !== "undefined" && self) ||
(typeof global !== "undefined" && global);
if (!global?.self) {
global.self = global;
}
on your index.svelte / _layout.svelte
<script context="module">
import "./define-self";
import "whatwg-fetch";
</script>

Related

I already installed firebase and the error remains

src\firebaseConnection.js
Line 17:17: 'initializeApp' is not defined no-undef
Search for the keywords to learn more about each error.
webpack compiled with 1 error and 1 warning
enter image description here
You should import like this:
import { initializeApp } from "firebase/app";
const firebaseConfig = {...};
const app = initializeApp(firebaseConfig);
You may want to visit this documentation and learn how to use Firebase Services such as Firestore.

Collection is not defined after a bare meteor install on windows 10

This newly installed meteor (1.10.2) by chocolatey on windows 10 followed by meteor create --bare appName then copy/paste some 2 year old code I had parked for a while. Chassing the cause of this runtime error for no avail.
ReferenceError: DataTeckCol is not defined
at server/dataTeck.js:13:1
at module (server/dataTeck.js:20:8)
../server/dataTeck.js
"use strict";
let cheerio = require('cheerio');
import {Matcher} from "./matcher";
import {Dispatcher} from "./dispatcher";
import '../imports/api/dataTeck.js';
DataTeckCol.remove({plateNum: {$in: plates}}); //<<<<<<<< Error line
../imports/api/dataTeck.js
import { Mongo } from 'meteor/mongo';
export const DataTeckCol = new Mongo.Collection('dataTeckCol');
You need to explicitly import the exported const, so instead of
import '../imports/api/dataTeck.js';
you need to import it via
import { DataTeckCol } from '../imports/api/dataTeck.js';

Google analytics on my React app with firebase SDK

I used Google Analytics a lot for many sites...
I'm just releasing a first app with Firebase (Firestore + Firebase SDK with reactjs).
Then, I activated GA from my Firebase dashboard... but I cannot see any activity !
I probably need not to add plugin like "autotrack" ?
import 'autotrack';
ga('create', 'UA-XXXXX-Y', 'auto');
It's not clear because, it's impossible to find out the track ID (UA-XXXXX-Y) from my dashboard !
Do I really need it ? Where can I find it ?
I did't correctly initialized Analytics...
With firebase it's not a track ID but a measurementId
import app from 'firebase/app';
import 'firebase/analytics';
app.initializeApp({
//other config
measurementId : process.env.REACT_APP_MEASUREMENT_ID,
appId : process.env.REACT_APP_DEV_ID
})
//put inside your constructor
app.analytics()
This will solve the following error:
Error: firebase__WEBPACK_IMPORTED_MODULE_8___default.a.analytics is
not a function react
Documentation : https://firebase.google.com/docs/analytics/get-started?platform=web
The previous answer should be corrected like this:
import app from 'firebase/app';
import 'firebase/analytics';
app.initializeApp({
//other config
measurementId : process.env.REACT_APP_MEASUREMENT_ID,
appId : process.env.REACT_APP_DEV_ID
})
//put inside your constructor
app.analytics()
This will solve the following error:
Error: firebase__WEBPACK_IMPORTED_MODULE_8___default.a.analytics is
not a function react
My issue was the same as listed above:
Error: firebase__WEBPACK_IMPORTED_MODULE_8___default.a.analytics is not a function react
But the resolution was that I forgot to import the analytics module: import 'firebase/analytics';
If you are using Typescript:
// On index.tsx
import { initializeApp } from 'firebase/app';
import { initializeAnalytics } from 'firebase/analytics';
const firebaseConfig = {
... your config object ...
};
const app = initializeApp(firebaseConfig);
initializeAnalytics(app);
Firebase gone through a lot of new updates. Change imports like this;
import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';
import 'firebase/compat/firestore';
import 'firebase/compat/analytics';

How to import redux-logger?

I'm trying to import redux logger v.3.0.6. https://github.com/evgenyrodionov/redux-logger
Attempt 1
import logger from 'redux-logger';
error
Uncaught SyntaxError: The requested module '../node_modules/redux-logger/dist/redux-logger.js' does not provide an export named 'default'
Attempt 2
import { logger } from 'redux-logger';
error
Uncaught SyntaxError: The requested module '../node_modules/redux-logger/dist/redux-logger.js' does not provide an export named 'logger'
Attempt 3
import { createLogger } from 'redux-logger';
error
Uncaught SyntaxError: The requested module '../node_modules/redux-logger/dist/redux-logger.js' does not provide an export named 'createLogger'
The third one is the one suggested on the github page. How do I solve this?
I had the same issue and solved it like this:
import createLogger from 'redux-logger';
// ...
const loggerMiddleware = createLogger;
It seems createLogger is a default export.
I am using like your first attempt and it is working fine,
import logger from "redux-logger";
I am also using the same version - 3.0.6 for both typings and logger itself.
"#types/redux-logger": "^3.0.6",
"redux-logger": "^3.0.6",
This suggestion was given to me in the error i got after installing and importing redux-logger.
the fix i found out is given below.
import pkg from "redux-logger";
const {createLogger}=pkg;
const logger=createLogger()
hope it helps!!

How to get reference to Firebase Realtime Database

I am getting this error when i try to use the rtdb on an angularfire2 app.
ERROR TypeError: firebase_app__WEBPACK_IMPORTED_MODULE_2__.database is not a function
at new AuthService (auth.service.ts:29)
at _createClass (core.js:9272)
at _createProviderInstance$1 (core.js:9234)
at resolveNgModuleDep (core.js:9200)
at NgModuleRef_.push../node_modules/#angular/core/fesm5/core.js.NgModuleRef_.get (core.js:9911)
at resolveDep (core.js:10276)
at createClass (core.js:10152)
at createDirectiveInstance (core.js:10033)
at createViewNodes (core.js:11255)
at callViewAction (core.js:11571)
I imported firebase as follows:
import * as firebase from 'firebase/app';
The following gives me the above error:
db = firebase.database();
Import it like this:
import * as firebase from 'firebase';
import 'firebase/firestore';
use AngularFire2, It can be insalled by npm

Resources