<p>Try adding this line to webpack config:</p>
<pre><code>config.output.webassemblyModuleFilename = 'static/wasm/[modulehash].wasm'
</code></pre>
<p>Also try loading component utilizing the wasm library using dynamic:</p>
<pre><code>import dynamic from 'next/dynamic';

const component = dynamic(() =&gt; import('./component'), { ssr: false });
</code></pre>

CC BY-SA 4.0
2022-07-25T11:00:57.027Z
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 https://github.com/vercel/next.js/issues/25852
Giovanni G
CC BY-SA 4.0
2022-07-25T11:34:13.533Z
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
CC BY-SA 4.0
2022-07-26T02:43:26.680Z
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 https://github.com/MartifyLabs/mesh if you want to check our code implementation or demo at https://mesh.martify.io/
Jingles
CC BY-SA 4.0
2022-07-25T10:05:44.647Z
2022-07-25T10:05:44.647Z
dzCodes
<p>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.</p>

CC BY-SA 4.0
2024-04-14T16:05:39.780Z
2024-04-14T16:05:39.780Z
John Ndigirigi
<p>I'm a complete NextJS / React and Wasm newbie, but I'm having fun learning and building a simple website.</p>
<p>I've added <code>@emurgo/cardano-serialization-lib-browser</code> as a dep to my NextJS 17 project w/ <code>npm i @emurgo/cardano-serialization-lib-browser</code>.</p>
<p>When I run in dev mode <code>npm run dev</code> all is fine, I can use the library and everything looks great.</p>
<p>Unfortunately, when I build the project to deploy it on Vercel, I get the following error:</p>
<pre><code>[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'
}
</code></pre>
<p>This is my <code>package.json</code></p>
<pre><code>{
  &quot;name&quot;: &quot;raffles-easystaking&quot;,
  &quot;version&quot;: &quot;0.1.0&quot;,
  &quot;private&quot;: true,
  &quot;scripts&quot;: {
    &quot;dev&quot;: &quot;next dev&quot;,
    &quot;build&quot;: &quot;next build&quot;,
    &quot;start&quot;: &quot;next start&quot;,
    &quot;lint&quot;: &quot;next lint&quot;
  },
  &quot;dependencies&quot;: {
    &quot;@emurgo/cardano-serialization-lib-browser&quot;: &quot;^10.2.0&quot;,
    &quot;@fortawesome/fontawesome-svg-core&quot;: &quot;^6.1.1&quot;,
    &quot;@fortawesome/free-solid-svg-icons&quot;: &quot;^6.1.1&quot;,
    &quot;@fortawesome/react-fontawesome&quot;: &quot;^0.2.0&quot;,
    &quot;next&quot;: &quot;12.1.0&quot;,
    &quot;react&quot;: &quot;17.0.2&quot;,
    &quot;react-dom&quot;: &quot;17.0.2&quot;,
    &quot;react-hot-toast&quot;: &quot;^2.2.0&quot;
  },
  &quot;devDependencies&quot;: {
    &quot;autoprefixer&quot;: &quot;^10.4.7&quot;,
    &quot;eslint&quot;: &quot;8.20.0&quot;,
    &quot;eslint-config-next&quot;: &quot;12.2.2&quot;,
    &quot;postcss&quot;: &quot;^8.4.14&quot;,
    &quot;tailwindcss&quot;: &quot;^3.1.6&quot;
  }
}
</code></pre>
<p>and this is my <code>next.config</code></p>
<pre><code>/** @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
</code></pre>
<p>I also use tailwind, but I don't think that would be the issue.</p>
<p>Any help appreciated.</p>
<p>Thanks!</p>

<cardano-serialization-lib><react>
@emurgo/cardano-serialization-lib-browser on NextJS error when running `npm run build`
# @emurgo/cardano-serialization-lib-browser on NextJS error when running `npm run build`

(Asked by: username_0 on 2022-07-25)

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!

**Tags:** cardano-serialization-lib, react

---

## 2 answers

### Answer by username_1 on 2022-07-25. Score: 1 | Accepted answer

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 });

> **Comments:**
> **username_0**: 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 https://github.com/vercel/next.js/issues/25852  
> **username_0**: 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 })```  
> **username_2**: 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 https://github.com/MartifyLabs/mesh if you want to check our code implementation or demo at https://mesh.martify.io/  

---

### Answer by username_3 on 2024-04-14. Score: 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.


---

