0

I'm a complete NextJS / React and Wasm newbie, but I'm having fun learning and building a simple website.

I've added @emurgo/cardano-serialization-lib-browser as a dep to my NextJS 17 project w/ npm i @emurgo/cardano-serialization-lib-browser.

When I run in dev mode npm run dev all is fine, I can use the library and everything looks great.

Unfortunately, when I build the project to deploy it on Vercel, I get the following error:

[Error: ENOENT: no such file or directory, open '/Users/giovanni/Development/workspace/raffles-easystaking/.next/server/static/wasm/35db299fd815ad0d.wasm'] {
  type: 'Error',
  errno: -2,
  code: 'ENOENT',
  syscall: 'open',
  path: '/Users/giovanni/Development/workspace/raffles-easystaking/.next/server/static/wasm/35db299fd815ad0d.wasm'
}

This is my package.json

{
  "name": "raffles-easystaking",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@emurgo/cardano-serialization-lib-browser": "^10.2.0",
    "@fortawesome/fontawesome-svg-core": "^6.1.1",
    "@fortawesome/free-solid-svg-icons": "^6.1.1",
    "@fortawesome/react-fontawesome": "^0.2.0",
    "next": "12.1.0",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "react-hot-toast": "^2.2.0"
  },
  "devDependencies": {
    "autoprefixer": "^10.4.7",
    "eslint": "8.20.0",
    "eslint-config-next": "12.2.2",
    "postcss": "^8.4.14",
    "tailwindcss": "^3.1.6"
  }
}

and this is my next.config

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
  webpack: function (config, options) {
    config.experiments = { asyncWebAssembly: true, layers: true };
    return config;
  }
}

module.exports = nextConfig

I also use tailwind, but I don't think that would be the issue.

Any help appreciated.

Thanks!

Improve this question

2 Answers 2

Reset to default
1

Try adding this line to webpack config:

config.output.webassemblyModuleFilename = 'static/wasm/[modulehash].wasm'

Also try loading component utilizing the wasm library using dynamic:

import dynamic from 'next/dynamic';

const component = dynamic(() => import('./component'), { ssr: false });
Improve this answer
3
  • Thanks, this helps, but unfortunately doesnt solve. So the module is created, but in the wrong folder. Next looks for the module in .next/server/static/wasm/35db299fd815ad0d.wasm but find returns ./.next/server/chunks/static/wasm/35db299fd815ad0d.wasm. Your suggestion influences both folders, and I don't seem to be able to fool webpack. Also, I'm very noob and I'm not sure how to use your second suggestion. I import port the followings: import { BaseAddress, Address } from '@emurgo/cardano-serialization-lib-browser' EDIT: the bug github.com/vercel/next.js/issues/25852
    – Giovanni G
    Commented Jul 25, 2022 at 11:00
  • Thanks @dzCodes, using dynamic fixed the issue. And for all teh noobs like me, you need to dynamic(ly) import the component using the wasm library, and not the library itself. In my case the lib was in the Nav component, so I did: import dynamic from 'next/dynamic'; const Nav = dynamic(() => import('./Nav'), { ssr: false })
    – Giovanni G
    Commented Jul 25, 2022 at 11:34
  • we fixed it is by doing a conditional import based on whether we are on browser or node. Mesh do this for you so you just import the package and it will do the rest for you. we have made Mesh open source github.com/MartifyLabs/mesh if you want to check our code implementation or demo at mesh.martify.io
    – Jingles
    Commented Jul 26, 2022 at 2:43
0

There are issues with running web assembly required by cardano_serialization_lib on most recent next js versions that are using SSR. To go around this, use pages directory alongside the app directory and move functionalities that require web assembly to pages besides setting up the next config to allow web assembly.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.