[Web] no available backend found. ERR: [wasm] TypeError: _ is not a function, [cpu] Error: previous call to 'initializeWebAssembly()' failed., [xnnpack] Error: previous call to 'initializeWebAssembly()' failed

[peng20017]

Describe the issue

hi，I have a question，i use vue build project
[email protected]
code :

import { InferenceSession, Tensor, env } from "onnxruntime-web";
env.wasm.wasmPaths = {
        "ort-wasm.wasm": window.location.origin + "/static/aiResource/js/ort-wasm-simd.wasm",
        "ort-wasm-simd.wasm":
          window.location.origin + "/static/aiResource/js/ort-wasm-simd.wasm",
        "ort-wasm-threaded.wasm":
          window.location.origin + "/static/aiResource/js/ort-wasm-simd.wasm",
        "ort-wasm-simd-threaded.wasm":
          window.location.origin + "/static/aiResource/js/ort-wasm-simd.wasm",
      };
      env.wasm.proxy = false;
      const session = await InferenceSession.create("/static/aiResource/mobilesam.encoder.onnx");

Everything is normal. However, when released to the production environment, the above issues arise;
error no available backend found. ERR: [wasm] TypeError: _ is not a function, [cpu] Error: previous call to 'initializeWebAssembly()' failed., [xnnpack] Error: previous call to 'initializeWebAssembly()' failed
I see that the file loading status is all 200, but the program is not executing

To reproduce

When I add a row of settings
env.wasm.proxy = true;
Everything is normal, but there will be an error when parsing again.
error: "DataCloneError: Failed to execute 'postMessage' on 'Worker': ArrayBuffer at index 0 is already detached."

Urgency

No response

ONNX Runtime Installation

Built from Source

ONNX Runtime Version or Commit ID

1.14.0

Execution Provider

'wasm'/'cpu' (WebAssembly CPU)

[fs-eire]

env.wasm.wasmPaths = {
        "ort-wasm.wasm": window.location.origin + "/static/aiResource/js/ort-wasm-simd.wasm",
        "ort-wasm-simd.wasm":
          window.location.origin + "/static/aiResource/js/ort-wasm-simd.wasm",
        "ort-wasm-threaded.wasm":
          window.location.origin + "/static/aiResource/js/ort-wasm-simd.wasm",
        "ort-wasm-simd-threaded.wasm":
          window.location.origin + "/static/aiResource/js/ort-wasm-simd.wasm",
      };

you cannot override the path like this. onnxruntime-web need those 4 different web assembly files. If you override every web assembly file to ort-wasm-simd.wasm, it will work only when SIMD is ON and multi-thread is OFF.

[lxfater]

Is that possible to override ort-wasm-simd-threaded.jsep.wasm？ @fs-eire

[fs-eire]

Is that possible to override ort-wasm-simd-threaded.jsep.wasm？ @fs-eire

No... but in your case you can simply override as string:

env.wasm.wasmPaths = window.location.origin + "/static/aiResource/js/";

this applies to every wasm file that used

[sinianchenghai]

May I ask if you have solved this problem? I would like to ask for specific solutions.

[fs-eire]

[wasm] TypeError: _ is not a function

This problem is likely caused by mismatch of the webassembly files. (eg. override ort-wasm.wasm as ort-wasm-threaded.wasm from the other path).

As I explained, the config env.wasm.wasmPaths is designed to override the path of each web assembly library (.wasm). The different web assembly libraries cannot be used to replace the other. As long as you get the paths of .wasm files correct, the problem should go away.

[peng20017]

[wasm] TypeError: _ is not a function

This problem is likely caused by mismatch of the webassembly files. (eg. override ort-wasm.wasm as ort-wasm-threaded.wasm from the other path).

As I explained, the config env.wasm.wasmPaths is designed to override the path of each web assembly library (.wasm). The different web assembly libraries cannot be used to replace the other. As long as you get the paths of .wasm files correct, the problem should go away.

I changed my code:
env.wasm.wasmPaths = {
"ort-wasm.wasm": window.location.origin + "/js/ort-wasm.wasm",
"ort-wasm-simd.wasm": window.location.origin + "/js/ort-wasm-simd.wasm",
"ort-wasm-threaded.wasm": window.location.origin + "/js/ort-wasm-threaded.wasm",
"ort-wasm-simd-threaded.wasm": window.location.origin + "/js/ort-wasm-simd-threaded.wasm",
};
env.logLevel = "verbose";
env.wasm.numThreads = 1;
The file status is all 200, but there is still an error message；
vendor.245c75e6669ae342.js:1 Uncaught (in promise) Error: no available backend found. ERR: [wasm] TypeError: v is not a function, [cpu] Error: previous call to 'initializeWebAssembly()' failed., [webnn] Error: previous call to 'initializeWebAssembly()' failed., [xnnpack] Error: previous call to 'initializeWebAssembly()' failed.

It's amazing that the development environment is normal, and once published online, errors occur.

[peng20017]

The file does not cross domains.
when i set: ort.env.wasm.proxy = true; Everything is normal now.
for the first time, decodingSession.run(decodingFeeds), is ok;
second time error:
"DataCloneError: Failed to execute 'postMessage' on 'Worker': ArrayBuffer at index 0 is already detached."
I don't know how to set it up. It's right；

[fs-eire]

I think for the proxy, it is a separated issue.

The buffer that you used to create input tensor is transferred to worker so if you reuse it and send it the second time it shows that error.

A workaround is to create or clone the underlying ArrayBuffer every time you put them as inputs. (TypedArray.slice)

[fs-eire]

ERR: [wasm] TypeError: v is not a function

Now _ changed to v in the error message. Also considering it is ok for dev build, I guess it has something to do with the bundler/transcript tool not working as expected. Could you try if the same error still exist on latest nightly build? ([email protected])

[peng20017]

i use onnxruntime-web": "^1.16.3", still reporting an error.
I think it may be a problem with webpack, but what confuses me is that setting proxy to true alone can work, but it can only be done once

[peng20017]

I can use the static resource ort.wasm.min.js to publish online and run normally. But through Vue cli, the development environment is normal, but there are issues with the online environment. The new project I built with Vue cli basically doesn't have any other plugins. Is there a compatibility issue with Vue cli.

[fs-eire]

Could you try version 1.17.0-dev.20240110-5f3113ecd6? We have a package export and bundler update after 1.16.3 and I assume it should work with Vue

[dongxingwangna]

env.debug = true;
// log level
env.logLevel = 'info';
// wasm
env.wasm.numThreads = 2;
env.wasm.simd = true;
env.wasm.wasmPaths = {
'ort-wasm.wasm': ortWasm,
'ort-wasm-simd.wasm': ortWasmSimd,
'ort-wasm-threaded.wasm': ortWasmThreaded,
'ort-wasm-simd-threaded.wasm': ortWasmSimdThreaded,
};
export default class ModelManager {
editor: Editor;
modelMap: Map<Models, InferenceSession> = new Map();
modelPath: Record<Models, string> = {
[Models.SAM]: SAM,
};

constructor(editor: Editor) {
    this.editor = editor;
}

async getModel(name: Models) {
    let model = this.modelMap.get(name);
    if (!model) {
        this.editor.showLoading(true);
        console.log('ModelManager.ts:44 ==> this.modelPath[name]-->', this.modelPath[name]);
        model = await InferenceSession.create(this.modelPath[name]);
        this.modelMap.set(name, model);
        this.editor.showLoading(false);
    }
    return model;
}

async runModel(name: Models) {
    let model = await this.getModel(name);
    console.log('ModelManager.ts:49 ==> model-->', model);
}

}

I ran into this issue when I tried to run the runModel method；

onnxruntime-web.js?v=8fab56b0:72 Uncaught (in promise) Error: no available backend found. ERR: [wasm] TypeError: Cannot read properties of undefined (reading 'buffer'), [cpu] Error: previous call to 'initializeWebAssembly()' failed., [xnnpack] Error: previous call to 'initializeWebAssembly()' failed.

[fs-eire]

TypeError: Cannot read properties of undefined (reading 'buffer')

This error message may indicate that this.modelPath[name] is undefined in InferenceSession.create(this.modelPath[name]);