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 = "";
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);
            .catch(function (error) {

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

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

// 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) => = "none";
showElement = (element) => = "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");

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:

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