React w/ Firebase: Cannot use import statement outside a module

Question

I've been following this tutorial for setting up firebase authentication with React. Unfortunately I already run into problems when trying to set up the firebase configuration. I have the following firebase.js file, just like in the tutorial:

import firebase from "firebase/app";
import "firebase/auth";
import "firebase/database";
import "firebase/firestore";

const firebaseConfig = {
  // I removed the configuration for security purposes
  apiKey: "xxx",
  authDomain: "xxx",
  databaseURL: "xxx",
  projectId: "xxx",
  storageBucket: "xxx",
  messagingSenderId: "xxx",
  appId: "xxx",
  measurementId: "xxx"
};

firebase.initializeApp(firebaseConfig);
export const auth = firebase.auth();
export const firestore = firebase.firestore();
export const database = firebase.database();

const provider = new firebase.auth.GoogleAuthProvider();
export const signInWithGoogle = () => {
  auth.signInWithPopup(provider);
}

I start up the React app and Google Chrome (!!!NOT REACT!!!) gives me the following error in the console:

Alright then, let's take a look at what piece of code that is.
As you can see, this is not an error from my code, but from the firebase code. This is in fact the code from the file at /node_modules/firebase/app/dist/index.esm.js. I tried reinstalling the firebase npm package multiple times, I even deleted the node modules folder, but it seems like this is intended.

I looked at my own code in Google Chrome to see what happened to the import statements that I used, and as you can see they've been changed to webpack require statements, while the firebase code hasn't changed

Any help as to why this error occurs, and/or how I can fix it is highly apprechiated!

Update

Here is my package.json:

{
  "name": "react-app-test",
  "version": "0.1.0",
  "private": true,
  "devDependencies": {
    "electron": "^1.7.9",
    "electron-winstaller": "^5.0.0",
    "foreman": "^2.0.0",
    "react-scripts": "0.8.5"
  },
  "dependencies": {
    "@reach/router": "^1.3.4",
    "firebase": "^8.7.0",
    "react": "^16.1.1",
    "react-dom": "^16.1.1"
  },
  "homepage": "./",
  "main": "src/electron-starter.js",
  "scripts": {
    "start": "react-scripts start",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject",
    "electron": "electron .",
    "dev": "nf start -p 3000"
  }
}

have you had a look at the answers here: https://stackoverflow.com/questions/58211880/uncaught-syntaxerror-cannot-use-import-statement-outside-a-module-when-import — iLuvLogix, Jul 05 '21 at 15:57
Try importing just `firebase` instead of `firebase/app` and see what happens. — Harshith, Jul 05 '21 at 15:58
@HarshithL that leads to the same problem, but this time the code is from `/node_modules/firebase/dist/index.esm.js` — Yoshie2000, Jul 05 '21 at 16:02
@iLuvLogix Those answers are mainly for importing firebase with script tags, but the answers for npm modules didn't change anything unfortunately. — Yoshie2000, Jul 05 '21 at 16:04
@iLuvLogix I am using WSL for this project and have just tried running it with powershell, so windows only. Unfortunately that didn't change anything either — Yoshie2000, Jul 05 '21 at 16:33

score 0 · Accepted Answer · answered Jul 05 '21 at 17:08

0

I solved this issue by simply downgrading my firebase version to version 7.8.2, the same version that the tutorial uses. It feels like this shouldn't be the way to solve this issue, but it works.

answered Jul 05 '21 at 17:08

Yoshie2000

300
1
11

React w/ Firebase: Cannot use import statement outside a module

Update

1 Answers1