Usage with Next.js and pnpm 7

[Taylor Bryant]

When using pnpm 7, we could not get the Next.js example to run.

Running pnpm dev would crash our dev server:

ready - started server on 0.0.0.0:3000, url: http://localhost:3000
error - unable to locate '/Users/[redacted]/projects/vad/examples/nextjs/node_modules/onnxruntime-web/dist/ort-wasm.wasm' glob
wait  - compiling...
error - unable to locate '/Users/[redacted]/projects/vad/examples/nextjs/node_modules/onnxruntime-web/dist/ort-wasm.wasm' glob
wait  - compiling...
error - unable to locate '/Users/[redacted]/projects/vad/examples/nextjs/node_modules/onnxruntime-web/dist/ort-wasm.wasm' glob
wait  - compiling...
error - unable to locate '/Users/[redacted]/projects/vad/examples/nextjs/node_modules/onnxruntime-web/dist/ort-wasm.wasm' glob
wait  - compiling / (client and server)...
error - unable to locate '/Users/[redacted]/projects/vad/examples/nextjs/node_modules/onnxruntime-web/dist/ort-wasm.wasm' glob
wait  - compiling /_error (client and server)...
error - unable to locate '/Users/[redacted]/projects/vad/examples/nextjs/node_modules/onnxruntime-web/dist/ort-wasm.wasm' glob
error - Error: Cannot find module '/Users/[redacted]/projects/vad/examples/nextjs/.next/fallback-build-manifest.json'
Require stack:
- /Users/[redacted]/projects/vad/examples/nextjs/node_modules/.pnpm/next@13.2.4_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/server/load-components.js
- /Users/[redacted]/projects/vad/examples/nextjs/node_modules/.pnpm/next@13.2.4_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/build/utils.js
- /Users/[redacted]/projects/vad/examples/nextjs/node_modules/.pnpm/next@13.2.4_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/cli/next-dev.js
- /Users/[redacted]/projects/vad/examples/nextjs/node_modules/.pnpm/next@13.2.4_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/lib/commands.js
- /Users/[redacted]/projects/vad/examples/nextjs/node_modules/.pnpm/next@13.2.4_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/bin/next
    at Function.Module._resolveFilename (node:internal/modules/cjs/loader:1028:15)
    at Function.mod._resolveFilename (/Users/[redacted]/projects/vad/examples/nextjs/node_modules/.pnpm/next@13.2.4_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/build/webpack/require-hook.js:23:32)
    at Function.Module._load (node:internal/modules/cjs/loader:873:27)
    at Module.require (node:internal/modules/cjs/loader:1100:19)
    at require (node:internal/modules/cjs/helpers:119:18)
    at Object.loadDefaultErrorComponentsImpl [as loadDefaultErrorComponents] (/Users/[redacted]/projects/vad/examples/nextjs/node_modules/.pnpm/next@13.2.4_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/server/load-components.js:23:24)
    at DevServer.getFallbackErrorComponents (/Users/[redacted]/projects/vad/examples/nextjs/node_modules/.pnpm/next@13.2.4_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/server/dev/next-dev-server.js:1196:43)
    at async DevServer.renderErrorToResponseImpl (/Users/[redacted]/projects/vad/examples/nextjs/node_modules/.pnpm/next@13.2.4_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/server/base-server.js:1308:40) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/Users/[redacted]/projects/vad/examples/nextjs/node_modules/.pnpm/next@13.2.4_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/server/load-components.js',
    '/Users/[redacted]/projects/vad/examples/nextjs/node_modules/.pnpm/next@13.2.4_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/build/utils.js',
    '/Users/[redacted]/projects/vad/examples/nextjs/node_modules/.pnpm/next@13.2.4_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/cli/next-dev.js',
    '/Users/[redacted]/projects/vad/examples/nextjs/node_modules/.pnpm/next@13.2.4_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/lib/commands.js',
    '/Users/[redacted]/projects/vad/examples/nextjs/node_modules/.pnpm/next@13.2.4_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/bin/next'
  ]
}
Error: Cannot find module '/Users/[redacted]/projects/vad/examples/nextjs/.next/fallback-build-manifest.json'
Require stack:
- /Users/[redacted]/projects/vad/examples/nextjs/node_modules/.pnpm/next@13.2.4_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/server/load-components.js
- /Users/[redacted]/projects/vad/examples/nextjs/node_modules/.pnpm/next@13.2.4_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/build/utils.js
- /Users/[redacted]/projects/vad/examples/nextjs/node_modules/.pnpm/next@13.2.4_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/cli/next-dev.js
- /Users/[redacted]/projects/vad/examples/nextjs/node_modules/.pnpm/next@13.2.4_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/lib/commands.js
- /Users/[redacted]/projects/vad/examples/nextjs/node_modules/.pnpm/next@13.2.4_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/bin/next
    at Function.Module._resolveFilename (node:internal/modules/cjs/loader:1028:15)
    at Function.mod._resolveFilename (/Users/[redacted]/projects/vad/examples/nextjs/node_modules/.pnpm/next@13.2.4_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/build/webpack/require-hook.js:23:32)
    at Function.Module._load (node:internal/modules/cjs/loader:873:27)
    at Module.require (node:internal/modules/cjs/loader:1100:19)
    at require (node:internal/modules/cjs/helpers:119:18)
    at Object.loadDefaultErrorComponentsImpl [as loadDefaultErrorComponents] (/Users/[redacted]/projects/vad/examples/nextjs/node_modules/.pnpm/next@13.2.4_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/server/load-components.js:23:24)
    at DevServer.getFallbackErrorComponents (/Users/[redacted]/projects/vad/examples/nextjs/node_modules/.pnpm/next@13.2.4_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/server/dev/next-dev-server.js:1196:43)
    at async DevServer.renderErrorToResponseImpl (/Users/[redacted]/projects/vad/examples/nextjs/node_modules/.pnpm/next@13.2.4_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/server/base-server.js:1308:40)
    at async pipe.req.req (/Users/[redacted]/projects/vad/examples/nextjs/node_modules/.pnpm/next@13.2.4_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/server/base-server.js:1192:30)
    at async DevServer.pipeImpl (/Users/[redacted]/projects/vad/examples/nextjs/node_modules/.pnpm/next@13.2.4_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/server/base-server.js:458:25)
    at async DevServer.run (/Users/[redacted]/projects/vad/examples/nextjs/node_modules/.pnpm/next@13.2.4_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/server/dev/next-dev-server.js:839:28)
    at async DevServer.handleRequestImpl (/Users/[redacted]/projects/vad/examples/nextjs/node_modules/.pnpm/next@13.2.4_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/server/base-server.js:375:20)
    at async /Users/[redacted]/projects/vad/examples/nextjs/node_modules/.pnpm/next@13.2.4_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/server/base-server.js:157:99 {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/Users/[redacted]/projects/vad/examples/nextjs/node_modules/.pnpm/next@13.2.4_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/server/load-components.js',
    '/Users/[redacted]/projects/vad/examples/nextjs/node_modules/.pnpm/next@13.2.4_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/build/utils.js',
    '/Users/[redacted]/projects/vad/examples/nextjs/node_modules/.pnpm/next@13.2.4_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/cli/next-dev.js',
    '/Users/[redacted]/projects/vad/examples/nextjs/node_modules/.pnpm/next@13.2.4_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/lib/commands.js',
    '/Users/[redacted]/projects/vad/examples/nextjs/node_modules/.pnpm/next@13.2.4_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/bin/next'
  ]
}

We solved this issue by explicitly declaring onnxruntime-web and @ricky0123/vad-web in our package.json:

pnpm add onnxruntime-web
pnpm add @ricky0123/vad-web

Leaving this here in case someone else tries to use VAD with the same setup.