Problem loading WASM dependency with App Router

[jmagan]

Link to the code that reproduces this issue or a replay of the bug

https://github.com/jmagan/minimal-wasm-next-app-router-problem

To Reproduce

I was using the library @emurgo/cardano-serialization-lib-nodejs with the page directory. I tried to update my project to App Router and when I perform the following steps, I'm getting an error:

1. Install a WASM dependency, the dependency is yarn add @emurgo/cardano-serialization-lib-nodejs. (This is already done in the minimal example).
2. Run yarnand yarn dev
3. Navigate to http://localhost:3000/

Current vs. Expected behavior

This error is thrown:

   Collecting page data ..Error: ENOENT: no such file or directory, open '/Users/user/ws/minimal-wasm-next-app-router-problem/.next/server/chunks/cardano_serialization_lib_bg.wasm'
    at Object.openSync (node:fs:603:3)
    at Object.readFileSync (node:fs:471:35)
    at 7831 (/Users/user/ws/minimal-wasm-next-app-router-problem/.next/server/chunks/831.js:2:308)
    at t (/Users/user/ws/minimal-wasm-next-app-router-problem/.next/server/webpack-runtime.js:1:142)
    at 3982 (//Users/user/ws/minimal-wasm-next-app-router-problem/.next/server/app/page.js:1:1838)
    at Function.t (/Users/user/ws/minimal-wasm-next-app-router-problem/.next/server/webpack-runtime.js:1:142)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async collectGenerateParams (/Users/user/ws/minimal-wasm-next-app-router-problem/node_modules/next/dist/build/utils.js:855:17) {
  errno: -2,
  syscall: 'open',
  code: 'ENOENT',
  path: '/Users/user/ws/Andamio/minimal-wasm-next-app-router-problem/.next/server/chunks/cardano_serialization_lib_bg.wasm'
}

> Build error occurred
Error: Failed to collect page data for /
    at /Users/user/ws/minimal-wasm-next-app-router-problem/node_modules/next/dist/build/utils.js:1191:15
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
  type: 'Error'
}

The name of the missing file is strange because it's supposed to be hashed and in this case, we've got: .next/server/chunks/cardano_serialization_lib_bg.wasm

Verify canary release

• [X] I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
      Platform: darwin
      Arch: arm64
      Version: Darwin Kernel Version 22.6.0: Wed Jul  5 22:21:53 PDT 2023; root:xnu-8796.141.3~6/RELEASE_ARM64_T6020
    Binaries:
      Node: 18.17.0
      npm: 9.6.7
      Yarn: 1.22.19
      pnpm: N/A
    Relevant Packages:
      next: 13.4.19
      eslint-config-next: 13.4.19
      react: 18.2.0
      react-dom: 18.2.0
      typescript: 5.2.2
    Next.js Config:
      output: N/A

Which area(s) are affected? (Select all that apply)

App Router

Additional context

The problem would be that Webpack isn't detecting correctly the wasm dependency.

The package.jsonof the library @emurgo/cardano-serialization-lib-nodejs is:

{
  "name": "@emurgo/cardano-serialization-lib-nodejs",
  "collaborators": [
    "EMURGO"
  ],
  "description": "(De)serialization functions for the Cardano blockchain along with related utility functions",
  "version": "11.5.0",
  "license": "MIT",
  "repository": {
    "type": "git",
    "url": "git+https://github.com/Emurgo/cardano-serialization-lib.git"
  },
  "files": [
    "cardano_serialization_lib_bg.wasm",
    "cardano_serialization_lib.js",
    "cardano_serialization_lib.d.ts",
    "cardano_serialization_lib.js.flow"
  ],
  "main": "cardano_serialization_lib.js",
  "types": "cardano_serialization_lib.d.ts",
  "author": "EMURGO"
}

And this is the file structure:

.
├── LICENSE
├── README.md
├── cardano_serialization_lib.d.ts
├── cardano_serialization_lib.js
├── cardano_serialization_lib.js.flow
├── cardano_serialization_lib_bg.wasm
└── package.json

It seems that they used a tool called wasm-bidgenfor compilling wasm from rust to javascript. This issue might affect other javascript packages compiled with the same tool.

[siinghd]

Any update on this?

Edit by maintainers: Comment was automatically minimized because it was considered unhelpful. (If you think this was by mistake, let us know). Please only comment if it adds context to the issue. If you want to express that you have the same problem, use the upvote 👍 on the issue description or subscribe to the issue for updates. Thanks!

[nguyenvuhoang]

Do you have any solution?

[jmagan]

No, unfortunately it doesn't work and it seems to work worse with each upgrade.

[kaichii]

Same issue

Edit by maintainers: Comment was automatically minimized because it was considered unhelpful. (If you think this was by mistake, let us know). Please only comment if it adds context to the issue. If you want to express that you have the same problem, use the upvote 👍 on the issue description or subscribe to the issue for updates. Thanks!

[TorstenSchmitz]

Running into probably the same issue. repro here It's my own wrapper around a rust library and built with wasm-pack.

Curiously for me running yarn dev works if I include the following next js config

/** @type {import("next").NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  webpack: (config, options) => {
    config.experiments = {
      asyncWebAssembly: true,
      syncWebAssembly: true,
      layers: true,
    }
    return config
  },
}

module.exports = nextConfig;

However running yarn build fails, (wether or not webpackBuildWorker is force enabled)

[Error: ENOENT: no such file or directory, open '.next/server/static/wasm/9b4bccc7a1e0e263.wasm']

Given the slight difference in presentation I'm not 100% certain it's the same issue, but I'm too certain to open a separate issue.

Edit: nvm I got it working with the suggestion in #53163 to use next/dynamic and useEffect. I got yours somewhat working too and opened a PR against your example. Could not get static exports to work though.

[nguyenvuhoang]

Running into probably the same issue. repro here It's my own wrapper around a rust library and built with wasm-pack.

Curiously for me running yarn dev works if I include the following next js config

/** @type {import("next").NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  webpack: (config, options) => {
    config.experiments = {
      asyncWebAssembly: true,
      syncWebAssembly: true,
      layers: true,
    }
    return config
  },
}

module.exports = nextConfig;

However running yarn build fails, (wether or not webpackBuildWorker is force enabled)

[Error: ENOENT: no such file or directory, open '.next/server/static/wasm/9b4bccc7a1e0e263.wasm']

Given the slight difference in presentation I'm not 100% certain it's the same issue, but I'm too certain to open a separate issue.

Edit: nvm I got it working with the suggestion in #53163 to use next/dynamic and useEffect. I got yours somewhat working too and opened a PR against your example. Could not get static exports to work though.

have you any new solution for this case?

[TorstenSchmitz]

have you any new solution for this case?

Just what's in the pull request, iirc the static export is still broken but for my own library it worked so I didn't look further into it.

[ndigirigijohn]

Currently encountering the same above issue

⨯ Error: ENOENT: no such file or directory, open 'C:\Users\johnn\Projects\hellomesh\.next\server\vendor-chunks\cardano_serialization_lib_bg.wasm'

Has anyone been able to resolve this?

[ndigirigijohn]

Currently encountering the same above issue

⨯ Error: ENOENT: no such file or directory, open 'C:\Users\johnn\Projects\hellomesh\.next\server\vendor-chunks\cardano_serialization_lib_bg.wasm'

Has anyone been able to resolve this?

I managed to work around this by moving the library imports and functionalities that required web assembly to pages directory. I had to use the pages directory alongside the the app directory.

[lednhatkhanh]

Has anyone able to find a way to resolve this?