Javascript error - Require is not defined

Question

I am trying to connect my web app to firebase database. When using a local server to host the website, i get error index.js:11 Uncaught ReferenceError: Require is not defined

I installed npm firebase-tools and I believe that my html and js setup is correct.

I don't really know how to move forward from here. All help is welcome.

Code Snippets

    <script src="https://www.gstatic.com/firebasejs/7.16.1/firebase-app.js"></script>
    
        <script src="https://www.gstatic.com/firebasejs/7.16.1/firebase-firestore.js"></script>
    
        <script src="/__/firebase/init.js"></script>
    
        <script src="index.js"></script>



// Your web app's Firebase configuration
var firebaseConfig = {
    apiKey: "AIzaSyAOjGyQG0eHQLqXomKYKTpdg0tmwaZvaiU",
    authDomain: "library-app-d49fe.firebaseapp.com",
    databaseURL: "https://library-app-d49fe.firebaseio.com",
    projectId: "library-app-d49fe",
    storageBucket: "library-app-d49fe.appspot.com",
    messagingSenderId: "168203985001",
    appId: "1:168203985001:web:d79809c549371b5df642f8"
};

const firebase = require("firebase");

// Required for side-effects
require("firebase/firestore");

Maybe [this](https://stackoverflow.com/questions/40884416/require-is-not-defined-in-firebase) answer could help you. Or you already seen it? — Giovanni Esposito, Jul 18 '20 at 13:18
check out this [doc](https://firebase.google.com/docs/web/setup#additional_setup_options) maybe you need to add defer to script tag — Moufeed Juboqji, Jul 18 '20 at 13:24
@GiovanniEsposito yes, I saw it, but I don't really understand it. — Paulo Brás, Jul 18 '20 at 13:48
**Update:** I removed those 2 lines that contain required in my JS file and everything is working well now - i got my entries in the database. Anyone able to explain me why that is the case? — Paulo Brás, Jul 18 '20 at 13:52
require doesnt work on web browser, it's for nodejs from server side — critrange, Jul 18 '20 at 14:02

score 2 · Accepted Answer · answered Jul 18 '20 at 13:57

It appears that your project is standard web project (no module bundler present). That is why you can't use require(), which is a Node.js API.

If this is indeed the case, then you can setup firebase using their CDN's:

index.html

<body>
  <!-- Firebase App -->
  <script src="https://www.gstatic.com/firebasejs/7.16.1/firebase-app.js"></script>
  <!-- Firestore -->
  <script src="https://www.gstatic.com/firebasejs/7.16.1/firebase-firestore.js"></script>
  <!-- Your custom JS file -->
  <script src="index.js"></script>
</body>

index.js

var firebaseConfig = {
  apiKey: "AIzaSyDOCAbC123dEf456GhI789jKl01-MnO",
  authDomain: "myapp-project-123.firebaseapp.com",
  databaseURL: "https://myapp-project-123.firebaseio.com",
  projectId: "myapp-project-123",
  storageBucket: "myapp-project-123.appspot.com",
  messagingSenderId: "65211879809",
  appId: "1:65211879909:web:3ae38ef1cdcb2e01fe5f0c",
  measurementId: "G-8GSGZQ44ST"
};


firebase.initializeApp(firebaseConfig);

If you're using firestore, you can create an instance of it, and assign it to a constant for later use:

const firestore = firebase.firestore()

That should do it.

To learn more about require(), check out this question.

Javascript error - Require is not defined

1 Answers1