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?

[olliejm]

The example repo for app router seems to have empty next config and also doesn't utilise MeshProvider? I had app router working with MeshProvider in Next 14 but just tried to update my project to Next 15 (+ React 19). Eventually with some adjustments like webpack asyncWebAssembly and layers, and serverExternalPackages, the wasm related error abated. But I still get some error (can copy paste it later, currently on mobile) about mesh finding useState from react to be undefined. I presume its related to react 19? Is there any reason Mesh cant use the same react version as the project?

[BenElferink]

+1 same here

[BenElferink]

For added context, the above error occurs on build (using app router).
There's more info when run on localhost:

 ⨯ Error: ENOENT: no such file or directory, open '/Users/ben/_code/ada-drop/.next/server/vendor-chunks/sidan_csl_rs_bg.wasm'
    at (ssr)/./node_modules/@sidan-lab/sidan-csl-rs-nodejs/sidan_csl_rs.js (.next/server/vendor-chunks/@sidan-lab.js:19:1)
    at __webpack_require__ (.next/server/webpack-runtime.js:33:43)
    at (ssr)/./node_modules/@meshsdk/core-csl/dist/index.js (.next/server/vendor-chunks/@meshsdk.js:71:1)
    at __webpack_require__ (.next/server/webpack-runtime.js:33:43)
    at (ssr)/./node_modules/@meshsdk/wallet/dist/index.js (.next/server/vendor-chunks/@meshsdk.js:137:1)
    at __webpack_require__ (.next/server/webpack-runtime.js:33:43)
    at (ssr)/./node_modules/@meshsdk/react/dist/index.js (.next/server/vendor-chunks/@meshsdk.js:115:1)
    at __webpack_require__ (.next/server/webpack-runtime.js:33:43)
    at eval (webpack-internal:///(ssr)/./src/hooks/useConnectedWallet.ts:11:72)
    at (ssr)/./src/hooks/useConnectedWallet.ts (.next/server/app/page.js:1125:1)
    at __webpack_require__ (.next/server/webpack-runtime.js:33:43)
    at eval (webpack-internal:///(ssr)/./src/hooks/index.ts:15:77)
    at (ssr)/./src/hooks/index.ts (.next/server/app/page.js:1070:1)
    at __webpack_require__ (.next/server/webpack-runtime.js:33:43)
    at eval (webpack-internal:///(ssr)/./src/app/page.tsx:8:64)
    at (ssr)/./src/app/page.tsx (.next/server/app/page.js:300:1)
    at Object.__webpack_require__ [as require] (.next/server/webpack-runtime.js:33:43) {
  errno: -2,
  code: 'ENOENT',
  syscall: 'open',
  path: '/Users/ben/_code/ada-drop/.next/server/vendor-chunks/sidan_csl_rs_bg.wasm',
  digest: '2462769795'
}
 GET / 500 in 8099ms
 ⚠ ./node_modules/@sidan-lab/sidan-csl-rs-browser/sidan_csl_rs_bg.wasm
The generated code contains 'async/await' because this module is using "asyncWebAssembly".
However, your target environment does not appear to support 'async/await'.
As a result, the code may not run as expected or may cause runtime errors.

Import trace for requested module:
./node_modules/@sidan-lab/sidan-csl-rs-browser/sidan_csl_rs_bg.wasm
./node_modules/@sidan-lab/sidan-csl-rs-browser/sidan_csl_rs.js
./node_modules/@meshsdk/core-csl/dist/index.js
./node_modules/@meshsdk/wallet/dist/index.js
./node_modules/@meshsdk/react/dist/index.js
./src/hooks/useConnectedWallet.ts
./src/hooks/index.ts
./src/app/page.tsx

I've got my webpack setup:

import type { NextConfig } from 'next'

const nextConfig: NextConfig = {
  reactStrictMode: true,
  images: {
    unoptimized: true,
  },
  compiler: {
    styledComponents: true,
  },
  webpack: (config) => {
    // Enable support for async WebAssembly and layers
    config.experiments = {
      asyncWebAssembly: true,
      layers: true,
    }

    return config
  },
}

export default nextConfig