How to solve Uncaught ReferenceError: require is not defined at main.js:1

Moralis General
#1

I am trying to follow along with the Rarible clone tutorial, but when making use of async await statements Moralis adds

const { default: Moralis } = require("moralis/types");

to the top of the main.js file. But it seems that require() is not recognized by default in the browser. How to fix this?

I tried this guide but I still get the error

This is the full main.js file:

const { default: Moralis } = require("moralis/types");

//Moralis init code
const serverUrl = "https://y9hsm4runbtm.usemoralis.com:2053/server";
const appId = "rt6pVD9k1xm0d1DiZMWMSFhg3mBe3mxTHkrBDYh6";
Moralis.start({ serverUrl, appId });

// Authentication code
async function login() {
    let user = Moralis.User.current();
    if (!user) {
        user = await Moralis.authenticate({ signingMessage: "Log in using Moralis" })
            .then(function (user) {
                console.log("logged in user:", user);
                console.log(user.get("ethAddress"));
            })
            .catch(function (error) {
                console(error);
            });
    }
}

async function logOut() {
    await Moralis.User.logOut();
    console.log("logged out");
}

openUserProfile = async () => {
    user = await Moralis.User.current();
    if (user) {
        showElement(userProfile);
    } else {
        login();
    }
}

// Adding button functionality
loginBtn = document.getElementById("btnLogin");
loginBtn.onclick = login;
logoutBtn = document.getElementById("btnLogout");
logoutBtn.onclick = logOut;
userProfileBTN = document.getElementById("btnProfile");
userProfileBTN.onclick = openUserProfile;

hideElement = (element) => element.style.display = "none";
showElement = (element) => element.style.display = "block";
#2

Hi, can you give more details of what you are doing?

#3

Hi, I have edited the thread. Hope this helps

#4

where from did you get this line?

#5

It was added automatically. I also tried adding the functionality for fiat on ramping, but deleted that piece of code later. Maybe it comes from there?

#6

I donā€™t know where from it comes, but it shouldnā€™t be added automatically

#7

hey I am getting same error, can you please tell me what to do.
I am also doing same code

#8

If you are having an error with this same line, then remove it as this is not required in client-side app.

const { default: Moralis } = require("moralis/types");
#9

Yes! VS Code (and others) sometimes inserts it during an autocomplete.

It often results in the following error for me:

ReferenceError: Cannot access 'Moralis' before initialization

I canā€™t tell you how many times this import has busted all my cloud functions and sent me down a rabbit hole for over an hour, only to ā€œrememberā€ itā€™s a potential issue.

Not sure what the solution is, but this definitely needs to be mitigated somehow. :exploding_head:

#10

Hi @coder , can you create a new topic for your question. You error could be because you are using old moralis sdk.

#11

Done.

Thanks