Next.js does not pick the correct export of dependency

[fs-eire]

Link to the code that reproduces this issue

https://github.com/fs-eire/nextjs-onnxruntime

To Reproduce

1. npm ci and npm run dev
2. navigate to localhost:3000 and you will see the compile error.

Current vs. Expected behavior

Current:

./src/pages/components/OnnxButton.tsx:3:1
Module not found: Package path ./webgpu is not exported from package D:\code\nextjs-onnxruntime\node_modules\onnxruntime-web (see exports field in D:\code\nextjs-onnxruntime\node_modules\onnxruntime-web\package.json)

Expected: should be no error.

Provide environment information

Operating System:
  Platform: win32
  Arch: x64
  Version: Windows 10 Home
  Available memory (MB): 32510
  Available CPU cores: 32
Binaries:
  Node: 18.18.2
  npm: N/A
  Yarn: N/A
  pnpm: N/A
Relevant Packages:
  next: 14.2.11 // There is a newer version (14.2.13) available, upgrade recommended!
  eslint-config-next: 14.2.11
  react: 18.3.1
  react-dom: 18.3.1
  typescript: 5.6.2
Next.js Config:
  output: N/A
 ⚠ There is a newer version (14.2.13) available, upgrade recommended!
   Please try the latest canary version (`npm install next@canary`) to confirm the issue still exists before creating a new issue.
   Read more - https://nextjs.org/docs/messages/opening-an-issue

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

Module Resolution

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

next dev (local)

Additional context

This example project uses a library "onnxruntime-web", which only runs on browser. In the field "exports" in its package.json, "node" is explicitly disabled to avoid misusage of running in Node.js.

// (partial) file content of ./node_modules/onnxruntime-web/package.json

  "exports": {
    ...
    "./webgpu": {
      "node": null,
      "import": "./dist/ort.webgpu.bundle.min.mjs",
      "require": "./dist/ort.webgpu.min.js",
      "types": "./types.d.ts"
    }
  }

It should be working well in a browser environment for import * as onnx from 'onnxruntime-web/webgpu';. However it tries to read the "node" export field and fails, even if I put 'use client'; in the top of the file.

Related issue: microsoft/onnxruntime#21811

[naaa760]

Hello! @fs-eire :)

fix: #70296

To fix the bug, updatenext.config.jsto ensure Webpack resolves the correct browser module by adding an alias foronnxruntime-web/webgpu. Also, place 'use client';at the top of your component and use dynamic imports to load the library only in the browser environment withif (typeof window !== 'undefined'). Finally, upgrade to the latest Next.js version using npm install next@latestto ensure compatibility.

[fs-eire]

Hello! @fs-eire :)

fix: #70296

To fix the bug, updatenext.config.jsto ensure Webpack resolves the correct browser module by adding an alias foronnxruntime-web/webgpu. Also, place 'use client';at the top of your component and use dynamic imports to load the library only in the browser environment withif (typeof window !== 'undefined'). Finally, upgrade to the latest Next.js version using npm install next@latestto ensure compatibility.

Thank you so much for the solution! The combination of the following makes it work:

• use 'use client';
• use if (typeof windows !== 'undefined')

[github-actions]

This closed issue has been automatically locked because it had no new activity for 2 weeks. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.