NextJS build failing when using mongoose with TypeError: Cannot read properties of undefined (reading 'split')

Current state of affairs

I'm working on a little project with NextJS and just added mongoDB & mongoose and seriously struggling with an error. I'm trying to create a User in mongoDB upon successful login.

My versions are:

"mongoose": "^6.5.5",
"next": "latest",
"mongodb": "^4.9.1",

Current SetUp

• I created the env var with my db uri from mongodb, logged it and it's printing fine ✅
• Created a util folder with the mongodb connection and as follows (connection OK ✅):

import mongoose from 'mongoose';

const uri = process.env.MONGODB_URI;
const connection = mongoose
    .connect(uri, { useNewUrlParser: true, useUnifiedTopology: true })
    .then((result) => console.log(result))
    .catch((err) => console.log(err));

export default connection;

• created my User schema as well

import mongoose from 'mongoose';

const Schema = mongoose.Schema;

const userSchema = new Schema(
    {
        username: {
            type: String,
            required: true,
            unique: true,
        },
        email: {
            type: String,
            required: true,
            unique: true,
        },
    },
    { timestamps: true }
);

const User = mongoose.models.User || mongoose.model('User', userSchema);

export default User;

• created an api endpoint to createUser in mongoDB as follows

import connection from '../../util/mongodb';
import User from '../../models/user';
export default async function addUser(req, res) {
    try {
        console.log('CONNECTING TO MONGO');
        await connection();
        console.log('CONNECTED TO MONGO');
        const test = await User.create(req.body);
        res.json({ test });
    } catch (error) {
        console.log(error);
        res.json({ error });
    }
}

Problem Even before having all of this ready I was already getting the error below, but was hoping it would be sorted as I progressed. Still no luck..

index.js?46cb:264 Uncaught TypeError: Cannot read properties of undefined (reading 'split')
    at Object.eval (VM13547 browser.umd.js:220:314)
    at Object.eval (VM13547 browser.umd.js:220:334)
    at r (VM13547 browser.umd.js:1:206)
    at Object.eval (VM13547 browser.umd.js:1012:10)
    at r (VM13547 browser.umd.js:1:206)
    at Object.eval (VM13547 browser.umd.js:1009:10)
    at r (VM13547 browser.umd.js:1:206)
    at Object.eval (VM13547 browser.umd.js:308:1427)
    at Object.eval (VM13547 browser.umd.js:425:37)
    at r (VM13547 browser.umd.js:1:206)
    at Object.eval (VM13547 browser.umd.js:756:10)
    at r (VM13547 browser.umd.js:1:206)
    at Object.eval (VM13547 browser.umd.js:973:1699)
    at Object.eval (VM13547 browser.umd.js:977:75)
    at r (VM13547 browser.umd.js:1:206)
    at Object.eval (VM13547 browser.umd.js:973:255)
    at r (VM13547 browser.umd.js:1:206)
    at eval (VM13547 browser.umd.js:1:1005)
    at eval (VM13547 browser.umd.js:1:1015)
    at eval (VM13547 browser.umd.js:1:37)
    at eval (VM13547 browser.umd.js:1:43)
    at ./node_modules/mongoose/dist/browser.umd.js (_app.js?ts=1662577977003:683:1)
    at options.factory (webpack.js?ts=1662577977003:661:31)
    at __webpack_require__ (webpack.js?ts=1662577977003:37:33)
    at fn (webpack.js?ts=1662577977003:316:21)
    at eval (VM13546 user.js:2:66)
    at ./models/user.js (_app.js?ts=1662577977003:923:1)
    at options.factory (webpack.js?ts=1662577977003:661:31)
    at __webpack_require__ (webpack.js?ts=1662577977003:37:33)
    at fn (webpack.js?ts=1662577977003:316:21)
    at eval (VM13501 RegisterForm.jsx:12:70)
    at ./components/RegisterForm.jsx (_app.js?ts=1662577977003:901:1)
    at options.factory (webpack.js?ts=1662577977003:661:31)
    at __webpack_require__ (webpack.js?ts=1662577977003:37:33)
    at fn (webpack.js?ts=1662577977003:316:21)
    at eval (VM13385 index.js:27:72)
    at ./components/index.js (_app.js?ts=1662577977003:912:1)
    at options.factory (webpack.js?ts=1662577977003:661:31)
    at __webpack_require__ (webpack.js?ts=1662577977003:37:33)
    at fn (webpack.js?ts=1662577977003:316:21)
    at eval (_app.tsx:7:69)
    at ./pages/_app.tsx (_app.js?ts=1662577977003:1000:1)
    at options.factory (webpack.js?ts=1662577977003:661:31)
    at __webpack_require__ (webpack.js?ts=1662577977003:37:33)
    at fn (webpack.js?ts=1662577977003:316:21)
    at eval (?6782:5:16)
    at eval (route-loader.js?ea34:211:51)

I checked the error on the mongoose file and it's on this line

e.nodeMajorVersion=parseInt(t.versions.node.split(".")[0],10)})

Any help would much appreciated as I'm stuck with something I thought it would be straightforward.

I've tried to install other version of mongoose and a previous version of node as well.

TIA!