user2158: 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!

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


2158: <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>
 2871: <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>
