microsoft / onnxruntime

ONNX Runtime: cross-platform, high performance ML inferencing and training accelerator
https://onnxruntime.ai
MIT License
14.66k stars 2.93k forks source link

[Web] Error when using Web Workers on Next.js #22113

Open illbexyz opened 1 month ago

illbexyz commented 1 month ago

Describe the issue

I get the following error when using onnxruntime-web on Next.js with web workers:

I had no issues with onnxruntime-web@1.18.0.

I believe the issue is that Next.js is trying to load the file from the filesystem:

Additional notes:

Network requests screenshot:

image

To reproduce

The following reproductions are a bare Next.js 14 starter repository with onnxruntime@1.19.2.

Urgency

Kinda urgent: every Next.js project is impacted.

ONNX Runtime Installation

Released Package

ONNX Runtime Version or Commit ID

1.19.2

Execution Provider

'wasm'/'cpu' (WebAssembly CPU)

satyajandhyala commented 1 month ago

@illbexyz Can you try using onnxruntime 1.19 in a clean environment?

illbexyz commented 1 month ago

@satyajandhyala This is already the most minimal reproduction I could give. It's just onnxruntime-web added to a bare Next.js project initialized with npx create-next-app@latest.

fs-eire commented 1 month ago

Script at 'file:///Users/alberto.nicoletti/node_modules/onnxruntime-web/dist/ort.bundle.min.mjs' cannot be accessed from origin 'http://localhost:3000'.

This is a known issue. If you use webpack loading onnxruntime-web as ESM, you need this line in your webpack config:

module: { parser: { javascript: { importMeta: false } } },

(see https://github.com/Microsoft/onnxruntime/blob/abdc31de401262bcb03f538423389c2eb264a0ce/js/web/test/e2e/webpack.config.esm-js.js)

Explaination: onnxruntime-web use import.meta.url at runtime to determine the script path so that it is able to create worker with correct path. However the default behavior of Webpack rewrites import.meta.url into a static local file path ( in your case file:///Users/alberto.nicoletti/node_modules/onnxruntime-web/dist/ort.bundle.min.mjs) and it won't work at runtime. the highlighted line in the config disabled this specific behavior of webpack.

May be a good idea to update our document/examples.

illbexyz commented 1 month ago

Hey @fs-eire, thanks for your time!

I tried adding the following to next.config.mjs:

webpack: (config) => {
  config.module.parser.javascript.importMeta = false;

  return config;
},

But now I get a different error:

SyntaxError: Cannot use 'import.meta' outside a module

I updated the reproductions if you wanna have a look.

image
fs-eire commented 1 month ago

I made a PR #22196. Hope to workaround this issue without having to modify webpack config from user side.

github-actions[bot] commented 2 weeks ago

This issue has been automatically marked as stale due to inactivity and will be closed in 30 days if no further activity occurs. If further support is needed, please provide an update and/or more details.

fs-eire commented 2 weeks ago

The issue is not resolved. I am still working on it.

arkniazi commented 5 days ago

@fs-eire I'm also facing similar issue. Were you able to create a fix for it?

fs-eire commented 3 days ago

It is still on my list. However I have multiple tasks to do so it may take a while. #22196 is an attempt but testing result shows that it does not fix everything. #22615 is the issue that tracks and explains why it is hard to fix.

I would be appreciated if anyone can help contribute or provider detailed information/clues to the issue.