MeshJS
@meshsdk not working with NextJS 14.1?
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?
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;
},
};