Firebase issue with react-snap

Question

I trying to load items from firebase on the homepage and it keeps giving me an error. Anyone have any advice?

I'm following the guides on https://github.com/stereobooster/react-snap

and implementing it like so:

import React from 'react';
import {hydrate, render } from 'react-dom';
import './index.css';
import App from './components/App';
import * as serviceWorker from './serviceWorker';
import FirebaseProvider from './utils/firebase'

const rootElement = document.getElementById("root");
if (rootElement?.hasChildNodes()) {
  hydrate( <FirebaseProvider><App /> </FirebaseProvider> , rootElement);
} else {
  render(<FirebaseProvider><App /> </FirebaseProvider> , rootElement);
}

This is the error:

TypeScript error in /Users/bigbot/Desktop/buyid/src/index.tsx(11,12):
This JSX tag's 'children' prop expects a single child of type 'ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)> | null) | (new (props: any) => Component<any, any, any>)>', but multiple children were provided.  TS2746

     9 | const rootElement = document.getElementById("root");
    10 | if (rootElement?.hasChildNodes()) {
  > 11 |   hydrate(<FirebaseProvider> <App /> </FirebaseProvider>, rootElement);
       |            ^
    12 | } else {
    13 |   render(<FirebaseProvider><App /></FirebaseProvider>, rootElement);
    14 | }

Answer 1

There is an additional ? in your codes. I suggest you try changing

if (rootElement?.hasChildNodes()) {
  hydrate( <FirebaseProvider><App /> </FirebaseProvider> , rootElement);
} else {
  render(<FirebaseProvider><App /> </FirebaseProvider> , rootElement);
}

to

if (rootElement.hasChildNodes()) {
  hydrate(<App />, rootElement);
} else {
  render(<App />, rootElement);
}