From fbae88f5ade6db2b9df5d178f912733f60ebc1a9 Mon Sep 17 00:00:00 2001
From: Yulong Wang <7679871+fs-eire@users.noreply.github.com>
Date: Wed, 29 Jan 2025 17:38:22 -0800
Subject: [PATCH] [js/web] use the recommended workaround for Vite (#23531)

### Description

After some investigation and debug, I decided to follow the recommended
workaround as suggested in https://github.com/vitejs/vite/issues/8427.

### Motivation and Context

There is a known issue with Vite 5.x when using WebAssembly package.
Detail information is in https://github.com/vitejs/vite/issues/8427.

There are previous attempts to fix this problem (#23487). I tried
various ways to make it working out of the box for Vite users but none
of them worked: Some "fixes" did fix the usage of Vite but broke other
use case/bundler and some introduced other issues. Eventually I figured
out that there is no good way to fix this inside ONNX Runtime.

Considering the root cause is inside Vite and it may be fixed in Vite
v6. I think now the best way is to follow the recommended workaround.
---
 js/web/package.json                                      | 6 ------
 .../testcases/vite-default/src/components/onnx-helper.js | 9 ---------
 .../e2e/exports/testcases/vite-default/vite.config.js    | 6 ++++++
 3 files changed, 6 insertions(+), 15 deletions(-)

diff --git a/js/web/package.json b/js/web/package.json
index 4e6e2c32ae..181d6127f5 100644
--- a/js/web/package.json
+++ b/js/web/package.json
@@ -77,22 +77,16 @@
       "require": "./dist/ort.min.js",
       "types": "./types.d.ts"
     },
-    "./.mjs": "./dist/ort-wasm-simd-threaded.jsep.mjs",
-    "./.wasm": "./dist/ort-wasm-simd-threaded.jsep.wasm",
     "./all": {
       "import": "./dist/ort.all.bundle.min.mjs",
       "require": "./dist/ort.all.min.js",
       "types": "./types.d.ts"
     },
-    "./all/.mjs": "./dist/ort-wasm-simd-threaded.jsep.mjs",
-    "./all/.wasm": "./dist/ort-wasm-simd-threaded.jsep.wasm",
     "./wasm": {
       "import": "./dist/ort.wasm.bundle.min.mjs",
       "require": "./dist/ort.wasm.min.js",
       "types": "./types.d.ts"
     },
-    "./wasm/.mjs": "./dist/ort-wasm-simd-threaded.mjs",
-    "./wasm/.wasm": "./dist/ort-wasm-simd-threaded.wasm",
     "./webgl": {
       "import": "./dist/ort.webgl.min.mjs",
       "require": "./dist/ort.webgl.min.js",
diff --git a/js/web/test/e2e/exports/testcases/vite-default/src/components/onnx-helper.js b/js/web/test/e2e/exports/testcases/vite-default/src/components/onnx-helper.js
index 4b8c626157..332745f8e5 100644
--- a/js/web/test/e2e/exports/testcases/vite-default/src/components/onnx-helper.js
+++ b/js/web/test/e2e/exports/testcases/vite-default/src/components/onnx-helper.js
@@ -1,14 +1,5 @@
 import * as ort from 'onnxruntime-web';
 
-// The following line uses Vite's "Explicit URL Imports" feature to load the wasm file as an asset.
-//
-// see https://vite.dev/guide/assets.html#explicit-url-imports
-//
-import wasmFileUrl from 'onnxruntime-web/.wasm?url';
-
-// wasmFileUrl is the URL of the wasm file. Vite will make sure it's available in both development and production.
-ort.env.wasm.wasmPaths = { wasm: wasmFileUrl };
-
 // Model data for "test_abs/model.onnx"
 const testModelData =
   'CAcSDGJhY2tlbmQtdGVzdDpJCgsKAXgSAXkiA0FicxIIdGVzdF9hYnNaFwoBeBISChAIARIMCgIIAwoCCAQKAggFYhcKAXkSEgoQCAESDAoCCAMKAggECgIIBUIECgAQDQ==';
diff --git a/js/web/test/e2e/exports/testcases/vite-default/vite.config.js b/js/web/test/e2e/exports/testcases/vite-default/vite.config.js
index 37d3d6f22b..253ecbb621 100644
--- a/js/web/test/e2e/exports/testcases/vite-default/vite.config.js
+++ b/js/web/test/e2e/exports/testcases/vite-default/vite.config.js
@@ -3,5 +3,11 @@ import vue from '@vitejs/plugin-vue';
 
 // https://vite.dev/config/
 export default defineConfig({
+  // This is a known issue when using WebAssembly with Vite 5.x
+  // Need to specify `optimizeDeps.exclude` to NPM packages that uses WebAssembly
+  // See: https://github.com/vitejs/vite/issues/8427
+  optimizeDeps: {
+    exclude: ['onnxruntime-web'],
+  },
   plugins: [vue()],
 });