I'm working on a project where I need to implement Firestore database in a React app, which I do like this: I have a firebase.js file in the src directory which contains information about Firebase and exports a db object,

import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";

// Firebase project configuration
const firebaseConfig = {
  apiKey: ...
  authDomain: ...
  databaseURL: ...
  projectId: ...
  storageBucket: ...
  messagingSenderId: ...
  appId: ...
  measurementId: ...
};

const app = initializeApp(firebaseConfig);

// Get a reference to the database service
const db = getFirestore(app);

export { db }

Then I try to import the db object from App.js,

import React, { Component } from 'react';

import { db } from './firebase'

class App extends Component {
  render() {
    return (
      <div>
        <h1>Hello</h1>
      </div>
    );
  }
}

export default App;

And I get the following error in the console Uncaught SyntaxError: Cannot use import statement outside a module (at bundle.js:45109:2), as a result, the component does not render.

The line in which it seems to be a problem in bundle.js:45109:2 is this:

import { registerVersion } from '@firebase/app';