How to solve Uncaught ReferenceError: require is not defined at main.js: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";

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

Hi, I have edited the thread. Hope this helps

where from did you get this line?

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?

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

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

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");