CODEWITHSUNDEEP
javascriptfirebasevue.jsgoogle-cloud-firestore
noga
noga

Reputation: 43

How to fix "ReferenceError: require is not defined" in vuejs

I'm working on a vuejs + firebase project and i was trying to import firestore but when i access my page, this is displayed into the console: ReferenceError: require is not defined

I'v tried to put the import section in mounted() but it says my that i need to put the import stuffs in the top, that's what i did

This is below my html (register.html) body:

<script src="https://www.gstatic.com/firebasejs/6.4.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/6.4.0/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/6.4.0/firebase-firestore.js"></script>

<!-- TODO: Add SDKs for Firebase products that you want to use
     https://firebase.google.com/docs/web/setup#config-web-app -->

<script>
  // Your web app's Firebase configuration
  var firebaseConfig = {
    apiKey: "AIzaSyCNYH-sKZZXZhZt5LxQSDqwet7OTo5KgHM",
    authDomain: "thelogoagency-3a11d.firebaseapp.com",
    databaseURL: "https://thelogoagency-3a11d.firebaseio.com",
    projectId: "thelogoagency-3a11d",
    storageBucket: "",
    messagingSenderId: "101296201242",
    appId: "1:101296201242:web:00d0e7e3554b518d"
  };
  // Initialize Firebase
  firebase.initializeApp(firebaseConfig);
</script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="register.js"></script>

The top of my register.js

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

var app = new Vue({
    el: "#root",
    data: {
        burgerClass: "navbar-burger",
        menuClass: "navbar-menu",
        mobileMenuIsActive: "",
        mobileMenuHasBeenClicked: false,
        firstNameInput: "",
        lastNameInput: "",
        emailInput: "",
        passwordInput: "",
        authError : "",
        emailErrorClass : "",
        emailErrorHelp : "",
        passwordErrorClass : "",
        passwordErrorHelp : "",
        inputClass: "input ",
        nameErrorHelp: "",
        isLoading: false,
        firebase: firebase,
        db: null,
        numberOfInit: 0
    },

And mounted()

        if(this.numberOfInit = 0)
            firebase.initializeApp({
                apiKey: 'AIzaSyCNYH-sKZZXZhZt5LxQSDqwet7OTo5KgHM',
                authDomain: 'thelogoagency.tk',
                projectId: '1:101296201242:web:00d0e7e3554b518d'
            });

            this.db = firebase.firestore();
            this.numberOfInit ++
            this.db.collection("users").add({
                first: "Ada",
                last: "Lovelace",
                born: 1815
            })
            .then(function(docRef) {
                console.log("Document written with ID: ", docRef.id);
            })
            .catch(function(error) {
                console.error("Error adding document: ", error);
            });

    }

It should normaly just work fine because it copied it from firebase's doc. I know i'm probably doing it all wrong :) Thank for helping

Upvotes: 0

Views: 2166

Answers (4)

Hassaan Raza
Hassaan Raza

Reputation: 197

The way i fixed it was, i just removed these two lines!

        const firebase = require("firebase");
        require("firebase/firestore");

not needed if you are using javascript, and not NodeJS.

you only need these cdns

    <script src="https://www.gstatic.com/firebasejs/8.0.1/firebase-app.js"></script>
    <script src="https://www.gstatic.com/firebasejs/8.0.1/firebase-auth.js"></script>
    <script src="https://www.gstatic.com/firebasejs/8.0.1/firebase-firestore.js"></script>

and to start to firestore:

    firebase.initializeApp(firebaseConfig);
    var db = firebase.firestore();

Upvotes: 0

Yudha Primadiansyah
Yudha Primadiansyah

Reputation: 1

Install firebase-admin & firebase on npm , and then try this one "require('firebase-admin')" instead of require("firebase/firestore"); , and a note for you, it is impossible to run Backend Service in Client Side

Upvotes: 0

NoxFly
NoxFly

Reputation: 308

If you're using Javascript and not NodeJS, you just must link your lib with

<script src="https://my/lib.js"></script>

So you can remove your require line :)

Upvotes: 1

Palash Sharma
Palash Sharma

Reputation: 682

Require notation is only used when you are using npm and compiling the JS code. I think that you intend to only use the CDN script tag so you can remove the require line.

Upvotes: 1

Related Questions