Issues integrating mesh with nextjs 15

[invent360]

Hi guys,
trying to use the basic mesh js example in my next js project

`
"use client";

import { useEffect, useState } from "react";
import { MeshWallet } from '@meshsdk/core';
import { IWallet } from "@meshsdk/common";
import { QRCodeCanvas } from "qrcode.react";

export default function MeshWalletComponent() {
const [wallet, setWallet] = useState<IWallet | null>(null);
const [address, setAddress] = useState<string | null>(null);

useEffect(() => {}, []);

const createWallet = async () => {
    const secret_key = MeshWallet.brew(true) as string;
    console.log('Secret Key:', secret_key);

    if (secret_key.length > 0) {

/* if (fs) {
fs.writeFileSync('me.sk', secret_key);
}*/
} else {
throw new Error('Invalid secret_key: ' + secret_key);
}

    const wallet = new MeshWallet({
        networkId: 0,
        key: {
            type: 'root',
            bech32: secret_key,
        },
    });

    setWallet(wallet);

    const unusedAddresses = await wallet.getUnusedAddresses(); // Await the promise
    console.log('Unused Addresses:', unusedAddresses);

    if (Array.isArray(unusedAddresses) && unusedAddresses.length > 0) {
        setAddress(unusedAddresses[0]);

/* if (fs) {
fs.writeFileSync('me.addr', unusedAddresses[0]);
}*/
} else {
throw new Error('No unused addresses available');
}
};

const QrCodeComponent = ({ address }: { address: string }) => {
    return (
        <div>
            <h3>QR Code for Address</h3>
            <QRCodeCanvas value={address} size={256} />
        </div>
    );
};

return (
    <>
        <button
            className="w-full py-3 px-4 inline-flex justify-center items-center gap-x-2 text-sm font-medium rounded-lg border border-transparent bg-blue-600 text-white hover:bg-blue-700 focus:outline-none focus:bg-blue-700 disabled:opacity-50 disabled:pointer-events-none"
            onClick={createWallet}
        >
            New Wallet
        </button>

        {wallet && (
            <div className="mt-4 p-4 border rounded-lg">
                <h3 className="text-lg font-semibold">Wallet Details</h3>
                <p><strong>Address:</strong> {wallet.getUnusedAddresses()}</p>
                <QrCodeComponent address={address as string} />
            </div>
        )}
    </>
);

}

main.tsx

"use client";

import {useEffect} from "react";
import LucidWallet from "@/app/components/ui/wallets/lucid";
import MeshWalletComponent from "@/app/components/ui/wallets/mesh";

export default function Page() {

useEffect(() => {

}, []);

return (
    <>
        <h2>Wallets</h2>
        <MeshWalletComponent />
    </>
);

}
`

have having the following errors

`Build Error
Next.js (15.1.3) out of date (learn more) (Turbopack)
Failed to compile

./node_modules/@sidan-lab/sidan-csl-rs-browser/sidan_csl_rs_bg.js:39691:17
Module not found: Can't resolve
39689 |
39690 | export function __wbg_require_0993fe224bf8e202(arg0, arg1) {

39691 | const ret = require(getStringFromWasm0(arg0, arg1));
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
39692 | return addHeapObject(ret);
39693 | };
39694 |

https://nextjs.org/docs/messages/module-not-found`

dependecy

"@meshsdk/core": "^1.8.9",

[jinglescode]

Have you check example repo?