Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[js/web] make ort-web export compatible with webpack #22196

Open
wants to merge 1 commit into
base: main
Choose a base branch
from

Conversation

fs-eire
Copy link
Contributor

@fs-eire fs-eire commented Sep 24, 2024

Description

This PR fixes a few problems when using onnxruntime-web as dependency in webpack.

Context

While onnxruntime-web fully supports ESM since v1.19, there are still issues reported for consuming onnxruntime-web in some frameworks like Next.js. After some investigation, one of the root causes is identified: onnxruntime-web depends on runtime evaluation of import.meta.url to create workers for proxy feature and web assembly multi-threading, but the runtime evaluation of import.meta.url is not supported by default for the mainstream version of the bundlers like Webpack.

Back to the old days when browsers didn't support import.meta.url, the bundlers encourages to use it in the form of:

new URL('my-file-name.js', import.meta.url)

This URL will be pre-processed at compile time to be replaced by a modified URL (can be script/asset/...) and it worked perfectly with bundler to resolve a lot of resource bundling requirement.

Today, most of the browsers support evaluating import.meta.url at runtime. It is expected to return the runtime URL of the current running script. This feature helps ESM scripts to load (both statically and dynamically) resources in a "modern" way. Unfortunately, this is conflicted with the "old way" that the bundler's default behavior.

Issues like #22113 is exactly caused by this problem.

Workaround

Ideally the solution should be provided by the bundler. However considering the wide usage of webpack and its ecosystem, we need to make a workaround to let onnxruntime-web working with bundlers with default configuration, before webpack fully supports ESM. (it is going to be a while for Webpack itself and features (eg. HMR))

The workaround is simple:

if (import.meta.url.startsWith('file:')) {
  // only when webpack overwrites `import.meta.url`
  url = new URL('ort.bundle.min.mjs', import.meta.url);
} else {
  url = new URL(import.meta.url);
}

This workaround works with the "bundled" build and tested with the following usage:

  • proxy off, multi-threading off
  • proxy on, multi-threading off
  • proxy off, multi-threading on
  • proxy on, multi-threading on

@fs-eire
Copy link
Contributor Author

fs-eire commented Sep 24, 2024

This should fix #22113 #22010

@fs-eire
Copy link
Contributor Author

fs-eire commented Sep 24, 2024

Looks like this does not work with all test scenarios.

Next.js, for example, always try to inject code and transform the code. This PR makes Next.js dev server work but still not working with release build.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants