I have this project that I didn't build myself from scratch but I took it from a friend of mine and I tried to implement a firebase database to it, the thing is that it runs smoothly and it compiles without any errors but whenever I try to submit a form in the index.html to the firebase Database it gives me this error in the console.
Uncaught (in promise) TypeError: Class extends value undefined is not a constructor or null
at ./node_modules/google-gax/build/src/streamArrayParser.js (streamArrayParser.ts:23:1)
at options.factory (react refresh:6:1)
at __webpack_require__ (bootstrap:24:1)
at fn (hot module replacement:62:1)
at ./node_modules/google-gax/build/src/fallbackServiceStub.js (fallbackServiceStub.ts:26:1)
at options.factory (react refresh:6:1)
at __webpack_require__ (bootstrap:24:1)
at fn (hot module replacement:62:1)
at ./node_modules/google-gax/build/src/fallback.js (fallback.ts:41:1)
at options.factory (react refresh:6:1)
Here is the streamArrayParser.js file where the error should be according to the console
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.StreamArrayParser = void 0;
const abort_controller_1 = require("abort-controller");
const stream_1 = require("stream");
const fallbackRest_1 = require("./fallbackRest");
const featureDetection_1 = require("./featureDetection");
class StreamArrayParser extends stream_1.Transform {
constructor(rpc, options) {
super(Object.assign({}, options, { readableObjectMode: true }));
this._done = false;
this._prevBlock = Buffer.from('');
this._isInString = false;
this._isSkipped = false;
this._level = 0;
this.rpc = rpc;
this.cancelController = (0, featureDetection_1.hasAbortController)()
? new AbortController()
: new abort_controller_1.AbortController();
this.cancelSignal = this.cancelController.signal;
this.cancelRequested = false;
}
_transform(chunk, _, callback) {
let objectStart = 0;
let curIndex = 0;
if (this._level === 0 && curIndex === 0) {
if (String.fromCharCode(chunk[0]) !== '[') {
this.emit('error', new Error(`Internal Error: API service stream data must start with a '[' and close with the corresponding ']', but it start with ${String.fromCharCode(chunk[0])}`));
}
curIndex++;
this._level++;
}
while (curIndex < chunk.length) {
const curValue = String.fromCharCode(chunk[curIndex]);
if (!this._isSkipped) {
switch (curValue) {
case '{':
// Check if it's in string, we ignore the curly brace in string.
// Otherwise the object level++.
if (!this._isInString) {
this._level++;
}
if (!this._isInString && this._level === 2) {
objectStart = curIndex;
}
break;
case '"':
// Flip the string status
this._isInString = !this._isInString;
break;
case '}':
// check if it's in string
// if true, do nothing
// if false and level = 0, push data
if (!this._isInString) {
this._level--;
}
if (!this._isInString && this._level === 1) {
// find a object
const objBuff = Buffer.concat([
this._prevBlock,
chunk.slice(objectStart, curIndex + 1),
]);
try {
// HTTP reponse.ok is true.
const msgObj = (0, fallbackRest_1.decodeResponse)(this.rpc, true, objBuff);
this.push(msgObj);
}
catch (err) {
this.emit('error', err);
}
objectStart = curIndex + 1;
this._prevBlock = Buffer.from('');
}
break;
case ']':
if (!this._isInString && this._level === 1) {
this._done = true;
this.push(null);
}
break;
case '\\':
// Escaping escape character.
this._isSkipped = true;
break;
default:
break;
}
}
else {
this._isSkipped = false;
}
curIndex++;
}
if (this._level > 1) {
this._prevBlock = Buffer.concat([
this._prevBlock,
chunk.slice(objectStart, curIndex),
]);
}
callback();
}
_flush(callback) {
callback();
}
cancel() {
this._done = true;
this.cancelRequested = true;
this.cancelController.abort();
this.end();
}
}
exports.StreamArrayParser = StreamArrayParser;
//# sourceMappingURL=streamArrayParser.js.map
Below is my index.html
import React , {Component} from "react";
import configData from "../../includes/config.json";
import axios from 'axios';
import Loading from '../../components/Loading';
import '../../css/common.scss';
class Register extends Component {
constructor(props)
{
super(props);
this.state = {
alert_message: "",
loading: false
}
this.onformSubmitBtnHandle = this.onformSubmitBtnHandle.bind(this);
this.onValueChange = this.onValueChange.bind(this);
}
async onformSubmitBtnHandle(e)
{
e.preventDefault();
const full_name = e.target.full_name.value.substring(0, 45);
const id_num = e.target.id_num.value;
if(id_num.length !== 10)
{
this.makeBorderRed("id_num");
this.setState({
alert_message: "error"
});
return;
}
e.target.submitBtn.disabled = true;
this.setState({
loading: true
});
const object = {
full_name: full_name,
id_num: id_num,
//other variables
}
const Firestore = require('@google-cloud/firestore');
const serviceAccount = {
//removed my service key
}
const db = new Firestore({
projectId: 'idwashere',
keyFilename: serviceAccount,
});
const dbRef = db.collection('customers').doc(`/customer${object.id_num}`);
await dbRef
.set(object);
// .then((response) => {
// this.setState({
// loading: false,
// });
// e.target.submitBtn.disabled = false;
// e.target.reset();
// this.props.history.push("/nextPage/" + id_num);
// });
}
makeBorderRed(el)
{
const elements = document.getElementsByClassName("row-input");
for(let i=0; i<elements.length; i++)
{
const element = elements[i];
if(element.name === el) {
element.classList.add("error");
}
}
}
onValueChange()
{
const elements = document.getElementsByClassName("row-input");
for(let i=0; i<elements.length; i++)
{
const element = elements[i];
element.classList.remove("error");
}
this.setState({
alert_message: ""
});
}
render() {
return (
<div className="page-content">
{this.state.loading && <Loading/> }
<form className="register-form" onSubmit={this.onformSubmitBtnHandle} onChange={this.onValueChange}>
<p className="form-title">123</p>
<div className='row'>
<p className="row-title" mandatory="true">1</p>
<input className="row-input" type="text" name='full_name' placeholder='1' maxLength={45} required/>
</div>
<div className='row'>
<p className="row-title" mandatory="true">2</p>
<input className="row-input" type="number" inputMode='numeric' name='id_num' placeholder='2' required onWheel={(e) => e.target.blur()}/>
</div>
<p className='alert-message'>{this.state.alert_message}</p>
<div className='form-buttons'>
<button className="form-submit-btn" name='submitBtn'>3</button>
</div>
</form>
</div>
);
}
}
export default Register;