@meshsdk not working with NextJS 14.1?

Trist01 commented 3 weeks ago

Hi!

I am using the latest versions of the core and react package together with NextJS 14

"@meshsdk/core": "^1.6.12",
"@meshsdk/react": "^1.6.12",
"next": "14.1.0",

Also enabled layers and asyncWebAssembly in my NextJS config:

webpack: function (config, options) {
    config.experiments = {
      asyncWebAssembly: true,
      layers: true,
    };
    return config;
  },

I am importing the MeshProvider component in my layout.tsx like this:

import "./globals.css";
import Layout from "@/components/layout/Layout";
import { MeshProvider } from "@meshsdk/react";

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <MeshProvider>
        <html lang="en">
          <body>
            <Layout>{children}</Layout>
          </body>
        </html>
    </MeshProvider>
  );
}

This gives me the following error: Error: ENOENT: no such file or directory, open '/Users/XXX/Work/Projects/XXX/.next/server/vendor-chunks/sidan_csl_rs_bg.wasm'

I looked at some similar issues and this was supposed to be fixed with the 1.6.X release?

jinglescode commented 3 weeks ago

is this app route? check example

Trist01 commented 3 weeks ago

is this app route? check example

@jinglescode Yes it is app route! Thank you, I got it working with the example.

For people using NextJS 14, the config is different compared to the provided example which uses NextJS 15.

This is what I used for NextJS 14:

const nextConfig = {
  experimental: {
    serverComponentsExternalPackages: [
      "@meshsdk/core",
      "@meshsdk/core-cst",
      "@meshsdk/react",
    ],
  },
  reactStrictMode: true,
  webpack: function (config, options) {
    config.experiments = {
      asyncWebAssembly: true,
      layers: true,
    };
    return config;
  },
};

gstalamantes commented 5 days ago

I was getting the same error, and building on Next 14.2.8 wasn't possible until using the config below:


const nextConfig = {
  experimental: {
    serverComponentsExternalPackages: [
      "@meshsdk/core",
      "@meshsdk/core-csl",
      "@meshsdk/core-cst",
      "@meshsdk/react",
    ],
  },
  reactStrictMode: true,
  webpack: function (config, options) {
    const { isServer } = options;
    config.experiments = {
      asyncWebAssembly: true,
      layers: true,
    };
    config.output = {
      ...config.output,
      webassemblyModuleFilename: isServer
        ? './../static/wasm/[modulehash].wasm'
        : 'static/wasm/[modulehash].wasm',
    };
    config.resolve.fallback = {
      ...config.resolve.fallback,
      fs: false,
      net: false,
      tls: false,
    };
    config.module.rules.push({
      test: /\.wasm$/,
      type: 'webassembly/async',
    });
    return config;
  },
};

export default nextConfig;

MeshJS / mesh

@meshsdk not working with NextJS 14.1? #276