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!

1 Answer 1

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 });
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
    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
    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
    Jul 26, 2022 at 2:43

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.