Errors integrating with nextjs 15

[invent360]

Hi guys,
just trying to use wallet functionality in my nextjs 15 app like so

`"use client";

import { useEffect, useState } from "react";
import { Lucid, Blockfrost, generatePrivateKey, generateSeedPhrase, LucidEvolution } from "@lucid-evolution/lucid";
import { Network } from "@lucid-evolution/core-types";

const CHAIN_URL = process.env.NEXT_PUBLIC_BLOCKFROST_CHAIN_URL;
const API_KEY = process.env.NEXT_PUBLIC_BLOCKFROST_API_KEY;
const CHAIN_NETWORK = process.env.NEXT_PUBLIC_CHAIN_NETWORK as Network;

interface WalletDetails {
privateKey: string;
address: string;
seedPhrase: string;
}

export default function LucidWallet() {
const [lucid, setLucid] = useState<LucidEvolution | null>(null);
const [walletDetails, setWalletDetails] = useState<WalletDetails | null>(null);

useEffect(() => {
    if (!CHAIN_URL || !API_KEY || !CHAIN_NETWORK) {
        console.error("Missing environment variables");
        return;
    }

    const initializeLucid = async () => {
        try {
            const lucidInstance = await Lucid(new Blockfrost(CHAIN_URL, API_KEY), CHAIN_NETWORK as Network);
            setLucid(lucidInstance);
            console.log("Lucid initialized:", lucidInstance);
        } catch (error) {
            console.error("Error initializing Lucid:", error);
        }
    };

    initializeLucid()
        .then((lucidInstance) => {
            console.log("Lucid initialized:", lucidInstance);
        })
        .catch((error) => {
            console.error("Error initializing Lucid:", error);
        });
}, []);

/*
 *
 * Get wallet details
 *
 */
const createWalletDetails = async () => {
    if (!lucid) {
        console.error("Lucid is not initialized");
        return;
    }

    const privateKey = generatePrivateKey();
    console.log("Generated Private Key:", privateKey);

    const seedPhrase = generateSeedPhrase();
    console.log("Generated Seed Phrase:", seedPhrase);

    lucid.selectWallet.fromPrivateKey(privateKey);

    try {
        const walletInstance = lucid.wallet();
        if (!walletInstance) {
            console.error("Wallet instance is undefined");
            return;
        }

        const address = await walletInstance.address();
        console.log("Generated Address:", address);

        const wallet = {
            privateKey,
            address,
            seedPhrase,
        };

        setWalletDetails(wallet);
    } catch (error) {
        console.error("Error generating wallet address:", error);
    }
};

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={createWalletDetails}
            disabled={!lucid}
        >
            New Wallet
        </button>

        {walletDetails && (
            <div className="mt-4 p-4 border rounded-lg">
                <h3 className="text-lg font-semibold">Wallet Details</h3>
                <p><strong>Address:</strong> {walletDetails.address}</p>
                <p><strong>Private Key:</strong> {walletDetails.privateKey}</p>
                <p><strong>Seed Phrase:</strong> {walletDetails.seedPhrase}</p>
            </div>
        )}
    </>
);

}
`

main.tsx

`"use client";

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

export default function Page() {

useEffect(() => {

}, []);

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

}`

and i am getting the following errors

` ✓ Compiled /pages/dashboard/wallets in 2.6s
⨯ Error: ENOENT: no such file or directory, open '[project]/node_modules/@anastasia-labs/cardano-multiplatform-lib-nodejs/cardano_multiplatform_lib.js [app-ssr] (ecmascript)/cardano_multiplatform_lib_bg.wasm'
at [project]/src/app/components/ui/wallets/lucid.tsx [app-ssr] (ecmascript) (src/app/components/ui/wallets/lucid.tsx:4:0)
at [project]/src/app/pages/dashboard/wallets/page.tsx [app-ssr] (ecmascript) (src/app/pages/dashboard/wallets/page.tsx:4:0)
2 |
3 | import { useEffect, useState } from "react";

4 | import { Lucid, Blockfrost, generatePrivateKey, generateSeedPhrase, LucidEvolution } from "@lucid-evolution/lucid";
5 | import { Network } from "@lucid-evolution/core-types";
6 | import {QRCodeCanvas} from "qrcode.react";
7 | import {getMeshWallet} from "@/app/components/ui/wallets/mesh2"; {
errno: -2,
code: 'ENOENT',
syscall: 'open',
path: '[project]/node_modules/@anastasia-labs/cardano-multiplatform-lib-nodejs/cardano_multiplatform_lib.js [app-ssr] (ecmascript)/cardano_multiplatform_lib_bg.wasm',
digest: '3059778322'
}
`

dependency

"@lucid-evolution/lucid": "^0.4.18",

any help will be appreciated