Unable to run onnxruntime-web with react

[frotaur]

Hi guys, I'm quite new to web development, but I would like to build a very simple react component in which I can do some inference with a model. However, I have been stuck for DAYS on a simple issue.

I created by react app with create-react-app. I then run npm install onnxruntime-web. After deleting the files from the react project which are not relevant for the minimal example (App.css, logo.svg and so on) , I am left with App.js in which I have the following code :

import * as ort from 'onnxruntime-web';

function App() {
  async function loadModel() {
    const session = await ort.InferenceSession.create('./model.onnx');
  }
  loadModel();
  return (
    <div className="ModelCanvas">
      Here, do stuff with the onnx model
    </div>
  );
}


export default App;

And a index.js :

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

Now, this gives me the following error when running npm start and going to the app's webpage :

ERROR
no available backend found. ERR: [wasm] RuntimeError: Aborted(CompileError: WebAssembly.instantiate(): expected magic word 00 61 73 6d, found 3c 21 44 4f @+0). Build with -sASSERTIONS for more info., [cpu] Error: previous call to 'initializeWebAssembly()' failed., [xnnpack] Error: previous call to 'initializeWebAssembly()' failed.
    at http://localhost:3001/static/js/bundle.js:7183:23
    at async d.create (http://localhost:3001/static/js/bundle.js:7162:19)
    at async loadModel (http://localhost:3001/static/js/bundle.js:26:21)

My (not very educated) guess is that is has to do with the webpack configuration automatically generated with create-react-app, but I'm not certain. The strange this, is if I remove the ort.InferenceSession.create('./model.onnx'), with something else using the package, say ort.Tensor = something, then it works fine, so I guess the ort imports works ok.

Of course, index.js, App.js are all in the same directory, src. I put model.onnx both in the public folder and in src, just in case.

I am really at my wits end, I have no idea what to try next. Could you explain to me what is wrong or if there is any resource that I missed that solves this problem ?

[carzh]

Hello, yes, it looks like a configuration issue since the correctly generated WebAssembly files should come with the npm package.

I've found these related issues, both of which suggest copying the *.wasm files (which will be found in ./dist) to ./public/js when using React, along with other detailed troubleshooting steps: #11413 #9322