vue3 (vite) でonnxruntime-webをimportした時に出るエラーを解決する

エラー

vue3(vite)でonnxruntime-webをimportするとエラーが出ました。
その解決方を残しておきます。

vueファイルのscript内で、以下のようにonnxruntime-webをimportしたところ、 エラーが発生しました。

import * as ort from "onnxruntime-web"

実際のエラー内容は下のようなものでした。

✘ [ERROR] Could not resolve "worker-loader?inline=no-fallback!./proxy-worker/main"

    node_modules/onnxruntime-web/lib/wasm/proxy-wrapper.ts:109:28:
      109 │       proxyWorker = require('worker-loader?inline=no-fallback!./proxy-worker/main').default() as Worker;
          ╵                             ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  You can mark the path "worker-loader?inline=no-fallback!./proxy-worker/main" as external to
  exclude it from the bundle, which will remove this error. You can also surround this "require"
  call with a try/catch block to handle this failure at run-time instead of bundle-time.

解決法探す

解決法を探していたら関連するissueがありました。

Vite actually run into scan file 'onnxruntime-web/lib/wasm/proxy-wrapper.js'. This is not what I expected; my expectation is the bundler picks up the single file 'dist/ort-web.min.js' directly, skipping the building phrase and ignores anything under folder 'onnxruntime-web/lib'.

dist/ort-web.min.jsを読み取るようにしてほしい的なことが書かれていました。
なのでimport文をimport * as ort from "onnxruntime-web"から import * as ort from "onnxruntime-web/dist/ort-web"に変更してみました。 結果、動くようになりました。

import * as ort from "onnxruntime-web/dist/ort-web"

しかし、実際に動くようになりましたが、typescriptの型エラーが発生していました。 Could not find a declaration file for module 'onnxruntime-web/dist/ort-web'.

どうすればいいかわからなかったので、@ts-ignoreで無視してみました。

// @ts-ignore
import * as ort from "onnxruntime-web/dist/ort-web";

これでとりあえず動くようになりました。

他にもviteのalias使えばできるかなと思い、 vite.cofig.tsのaliasに"onnxruntime-web": "onnxruntime-web/dist/ort-web"を設定してみました。

    alias: {
      "@": fileURLToPath(new URL("./src", import.meta.url)),
      "onnxruntime-web": "onnxruntime-web/dist/ort-web",
    }

aliasを設定したのでimport文を"onnxruntime-web"に戻しました。 こちらでもエラーが出なくなりました。 さらにこちらは型エラーも出ませんでした。

import * as ort from "onnxruntime-web"

解決

２つの方法でできましたが、簡単な方のaliasの設定がいいかなと思いました。

viteのaliasに以下のようにonnxruntime-webを追加します。

    alias: {
      "@": fileURLToPath(new URL("./src", import.meta.url)),
      // onnxruntime-webのaliasを追加
      "onnxruntime-web": "onnxruntime-web/dist/ort-web",
    },

これで、下のようにimportしてもエラーにならなくなりました。

import * as ort from "onnxruntime-web"

参考

• https://github.com/microsoft/onnxruntime/issues/10140