failed to inference ONNX model: TypeError: Cannot read properties of undefined (reading 'InferenceSession')

[raphael10-collab]

I tried to replicate the example found here: https://github.com/microsoft/onnxruntime-inference-examples/tree/main/js/quick-start_onnxruntime-web-bundler:

import * as React from 'react';

import ort from 'onnxruntime-web'
import regeneratorRuntime from 'regenerator-runtime'

function App_F() {

  // https://github.com/microsoft/onnxruntime-inference-examples/blob/main/js/quick-start_onnxruntime-web-bundler/main.js

  const onnxFunct = async () => {
    try {
      // create a new session and load the specific model

      // the model in this example contains a single MatMul node
      // it has 2 inputs: 'a'(float32, 3x4) and 'b'(float32, 4x3)
      // it has 1 output: 'c'(float32, 3x3)
      const session = await ort.InferenceSession.create('../../assets/onnx/model.onnx');

      //const dataA =  Float32Array.from([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12])
      //const dataB = Float32Array.from([10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 110, 120])
      //const tensorA = new ort.Tensor('float32', dataA, [3, 4])
      //const tensorB = new ort.Tensor('float32', dataB, [4, 3])

      // prepare feeds. use model input names as keys
      //const feeds = { a: tensorA, b: tensorB }

      // feed inputs and run
      //const results = await session.run(feeds)

      // read from results
      //const dataC = results.c.data
      //console.log(`data of result rensor 'c': ${dataC}`)

    } catch (e) {
      console.log(`failed to inference ONNX model: ${e}. `)
    }
  }

  return (
    <div className='container'>
      <h1 className='heading'>
          F
      </h1>

    </div>
  );
}

export default App_F;

In webpack.config.js :

      new CopyPlugin({
        patterns: [
          {
            from: path.resolve(__dirname, "./node_modules/onnxruntime-web/dist/*.wasm"),
            to: path.resolve(__dirname, "[name][ext]")
          },
          {
            from: path.resolve(__dirname, "./src/assets/onnx"),
            to: path.resolve(__dirname, "./dist/assets/onnx")
          }

tsconfig.js :

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "commonjs",
    "lib": ["dom", "es2015", "ESNext"],
    "outDir": "dist",
    //"jsx": "react",
    "jsx": "react-jsx",
    "baseUrl": "./src",
    "paths": {
      "@sections/*": ["app/sections/*"],
      "@app/*": ["app/*"]
    },
    "strict": true,
    "sourceMap": true,
    "skipLibCheck": true,
    "noImplicitAny": false,
    "noImplicitThis": false,
    "moduleResolution": "node",
    "esModuleInterop": true,
    "experimentalDecorators": true,
    "allowSyntheticDefaultImports": true,
    "resolveJsonModule": true,
    "allowJs": true
  },
  "include": ["src/**/*"],
  "exclude": [
    "src/index.js",
    "dist",
  ]
}

I get this error:

failed to inference ONNX model: TypeError: Cannot read properties of undefined (reading 'InferenceSession').

Other info:

"onnxruntime": "^1.7.0",
"onnxruntime-web": "^1.10.0"
 node: v16.13.0
O.S.: Ubuntu 20.04 Desktop

How to solve the problem?

[fs-eire]

it looks like although with this code import ort from 'onnxruntime-web', the value of ort is still undefined.

Either ort is overwritten to undefined, or webpack did something wrong to generate the bundle.

something you can try:

1. remove package "onnxruntime" in your package.json. "onnxruntime-web" is all you need.
2. check if you put "ort" as external in webpack config.

if you checked them and still have issue, you can share your full code and I will take a look.

[raphael10-collab]

I tried with both 'ort': 'onnxruntime-web', and ort: 'onnxruntime-web' in externals in webpack.config.js, but I still get this error:

failed to inference ONNX model: TypeError: Cannot read properties of undefined (reading 'InferenceSession')

This is the complete configuration and code:

in package.json:

"extraFiles": [
  "./src/*.onnx",
],
"dependencies": {
  "onnxruntime-web": "^1.10.0",
}

in webpack.config.js :

  new CopyPlugin({
    patterns: [
      {
        from: path.resolve(__dirname, "./node_modules/onnxruntime-web/dist/*.wasm"),
        to: path.resolve(__dirname, "[name][ext]")
      },
      {
        from: path.resolve(__dirname, "./src/assets/onnx"),
        to: path.resolve(__dirname, "./dist/assets/onnx")
      }
    ],
externals: [
  {
    ort: 'onnxruntime-web',
  },

tsconfig.json :

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "commonjs",
    "lib": ["dom", "es2015", "ESNext"],
    "outDir": "dist",
    //"jsx": "react",
    "jsx": "react-jsx",
    "baseUrl": "./src",
    "paths": {
      "@sections/*": ["app/sections/*"],
      "@app/*": ["app/*"]
    },
    "strict": true,
    "sourceMap": true,
    "skipLibCheck": true,
    "noImplicitAny": false,
    "noImplicitThis": false,
    "moduleResolution": "node",
    "esModuleInterop": true,
    "experimentalDecorators": true,
    "allowSyntheticDefaultImports": true,
    "resolveJsonModule": true,
    "allowJs": true
  },
  "include": ["src/**/*"],
  "exclude": [
    "src/index.js",
    "dist",
  ]
}

App_F.tsx :

import * as React from 'react'

import ort from 'onnxruntime-web'

function App_F() {

  const onnxFunct = async () => {
    try {
      // @ts-ignore
      let session = await ort.InferenceSession.create('../../assets/onnx/model.onnx');
    } catch (e) {
      console.log(`failed to inference ONNX model: ${e}. `)
    }
  }

onnxFunct()

  return (
    <div className='container'>
      <h1 className='heading'>
          Audio
      </h1>

    </div>
  );
}

export default App_F;

What should I modify and/or add to my configuration and code in order to make it work?

[fs-eire]

About the "externals" in webpack config, there are 2 ways:

1. [recommended] don't specify externals in webpack. By doing this, webpack should be able to pack ort web into your app bundle
2. keep "externals" for ort in webpack config (not sure if the current usage is correct ... maybe ort: 'ort'? ), and add a script tag to include ort.min.js from a CDN.

both ways should work.

=====================

ort being of undefined value indicates the webpack is not processing onnxruntime-web as dependency correctly. Please try to make sure ort is imported correctly

  const onnxFunct = async () => {
    try {

      // check if ort is valid
      if (!ort) {
        throw new Error('should not run here')
      }

      // @ts-ignore
      let session = await ort.InferenceSession.create('../../assets/onnx/model.onnx');
    } catch (e) {
      console.log(`failed to inference ONNX model: ${e}. `)
    }
  }

[raphael10-collab]

Hi!

I need to keep externals in webpack.config.js :

    // https://github.com/slackapi/node-slack-sdk/issues/746#issuecomment-778804407
    externals: [
      {
        'utf-8-validate': 'commonjs utf-8-validate',
        bufferutil: 'commonjs bufferutil',
        ort: 'ort',
      },
    ],

Because it solves this other issue: https://github.com/slackapi/node-slack-sdk/issues/746#issuecomment-778804407

For safety reasons I'm not using any CDN external links. According to what we read here: https://github.com/microsoft/onnxruntime/blob/master/js/README.md#distribution-2

ort.min.js should be available and be consumed both from CDN external link, and from NPM packages,

And I've already installed and imported onnxruntime-web :

(base) raphy@pc:~/Raphy-Template/node_modules/onnxruntime-web/dist$ ls -lah
total 51M
drwxrwxr-x 2 raphy raphy 4.0K Feb 18 20:32 .
drwxrwxr-x 6 raphy raphy 4.0K Feb 18 20:32 ..
-rw-r--r-- 1 raphy raphy 595K Feb 10 10:58 ort.es5.min.js
-rw-r--r-- 1 raphy raphy 1.8M Feb 10 10:58 ort.es5.min.js.map
-rw-r--r-- 1 raphy raphy 533K Feb 10 10:58 ort.es6.min.js
-rw-r--r-- 1 raphy raphy 1.8M Feb 10 10:58 ort.es6.min.js.map
-rw-r--r-- 1 raphy raphy 3.8M Feb 10 10:58 ort.js
-rw-r--r-- 1 raphy raphy 526K Feb 10 10:58 ort.min.js
-rw-r--r-- 1 raphy raphy 1.8M Feb 10 10:58 ort.min.js.map
-rw-r--r-- 1 raphy raphy  41K Feb 10 10:58 ort.wasm-core.min.js
-rw-r--r-- 1 raphy raphy 136K Feb 10 10:58 ort.wasm-core.min.js.map
-rw-r--r-- 1 raphy raphy 149K Feb 10 10:58 ort.wasm.min.js
-rw-r--r-- 1 raphy raphy 295K Feb 10 10:58 ort.wasm.min.js.map
-rw-r--r-- 1 raphy raphy 6.2M Feb 10 10:58 ort-wasm-simd-threaded.wasm
-rw-r--r-- 1 raphy raphy 6.9M Feb 10 10:58 ort-wasm-simd.wasm
-rw-r--r-- 1 raphy raphy  36K Feb 10 10:58 ort-wasm-threaded.js
-rw-r--r-- 1 raphy raphy 5.7M Feb 10 10:58 ort-wasm-threaded.wasm
-rw-r--r-- 1 raphy raphy 2.4K Feb 10 10:58 ort-wasm-threaded.worker.js
-rw-r--r-- 1 raphy raphy 6.5M Feb 10 10:58 ort-wasm.wasm
-rw-r--r-- 1 raphy raphy 589K Feb 10 10:58 ort-web.es5.min.js
-rw-r--r-- 1 raphy raphy 1.8M Feb 10 10:58 ort-web.es5.min.js.map
-rw-r--r-- 1 raphy raphy 527K Feb 10 10:58 ort-web.es6.min.js
-rw-r--r-- 1 raphy raphy 1.8M Feb 10 10:58 ort-web.es6.min.js.map
-rw-r--r-- 1 raphy raphy 386K Feb 10 10:58 ort.webgl.min.js
-rw-r--r-- 1 raphy raphy 1.5M Feb 10 10:58 ort.webgl.min.js.map
-rw-r--r-- 1 raphy raphy 3.7M Feb 10 10:58 ort-web.js
-rw-r--r-- 1 raphy raphy 520K Feb 10 10:58 ort-web.min.js
-rw-r--r-- 1 raphy raphy 1.8M Feb 10 10:58 ort-web.min.js.map
-rw-r--r-- 1 raphy raphy 520K Feb 10 10:58 ort-web.node.js
-rw-r--r-- 1 raphy raphy 1.8M Feb 10 10:58 ort-web.node.js.map
(base) raphy@pc:~/Raphy-Template/node_modules/onnxruntime-web/dist$ 

So... why webpack is not processing onnxruntime-web as dependency correctly?

[fs-eire]

you can keep the "externals" settings in your webpack to make utf-8-validate/bufferutil working. But if you also put onnxruntime-web inside "externals", it will not be compiled into the bundle. My recommendation is to exclude onnxruntime-web from the externals in the webpack config. not necessarily remove the whole "externals" settings.

if webpack is not processing a dependency library, check the target ( make sure it's targetting web ), externals (make sure it's NOT there) and alias ( again, make sure it's NOT there ). If you still cannot solve this issue, you need to dig deep into webpack to find the root cause. With imported value ort being undefined, there is little thing I can help in this stage.

[raphael10-collab]

@fs-eire

In webpack.config.js file:

• I commented all the alias part

• since it's an Electron app, the webpack configuration has two parts: one for the main, and the other for the renderer:

  // main process var main_config = { target: 'electron-main', // https://github.com/slackapi/node-slack-sdk/issues/746#issuecomment-778804407 externals: [ { 'utf-8-validate': 'commonjs utf-8-validate', bufferutil: 'commonjs bufferutil', },

  // renderer process var renderer_config = { target: ['web', 'es5'],

  externals: [
    {
      'utf-8-validate': 'commonjs utf-8-validate',
      bufferutil: 'commonjs bufferutil',
    },

But it still says: failed to inference ONNX model: TypeError: Cannot read properties of undefined (reading 'InferenceSession') Is this enough for theonnxruntime to be recognized and loaded?

Two weeks ago I asked help in StackOverflow but didn't receive any help, yet... : https://stackoverflow.com/questions/71067989/failed-to-inference-onnx-model-typeerror-cannot-read-properties-of-undefined I'm going to ask webpack people the same question, referring to this opened GitHub' Issue

[fs-eire]

There is not enough information to go further. Could you share the full steps of reproducing the error? Also please share your OS, Nodejs and browser version.

[raphael10-collab]

This is the complete webpack.config.js file :

const path = require('path');
const cwd = process.cwd();
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyPlugin = require("copy-webpack-plugin");
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const webpack = require('webpack');

// https://hackernoon.com/how-to-run-machine-learning-models-in-the-browser-using-onnx?source=rss

// https://github.com/Leaflet/Leaflet/issues/4849
//const sqlite3 = require('sqlite3');

const RedisGraph = require("redisgraph.js");

// https://github.com/Devtography/electron-react-typescript-webpack-boilerplate/blob/master/webpack.config.js

function srcPaths(src) {
  return path.join(__dirname, src);
}

// Creates Webpack Aliases using CWD path
//const createWebpackAliases = (als) => {
  //const result = {};
  //for (const name in als) {
    //result[name] = path.join(cwd, als[name]);
  //}
  //return result;
//};

//const aliases = createWebpackAliases({
  //'@src': 'src',
  //'@app': 'src/app',
  //'@app_A': 'src/app_A',
  //'@app_B': 'src/app_B',
  //'@app_C': 'src/app_C',
  //'@app_D': 'src/app_D',
  //'@app_E': 'src/app_E',
  //'@app_F': 'src/app_F',
  //'@app_G': 'src/app_G',
  //'@app_H': 'src/app_H',
  //'@app_webpdf': 'src/app_webpdf',
  //'@app_trial': 'src/lib/pdfjs-dist/web',
  //'@about': 'src/sections/about',
  //'@account': 'src/sections/Account/account',
  //'@static': 'src/static',
  //'@pdfviewer': 'src/lib/pdfjs-dist/web/viewer',
//});
const isEnvProduction = process.env.NODE_ENV === 'production';
const isEnvDevelopment = process.env.NODE_ENV === 'development';

  // main process
var main_config = {
    mode: isEnvProduction ? 'production' : 'development',
    entry: './src/main/main.ts',
    target: 'electron-main',
    resolve: {
      extensions: ['.jsx', '.js', 'ts'],
    },
    // https://github.com/slackapi/node-slack-sdk/issues/746#issuecomment-778804407
    externals: [
      {
        'utf-8-validate': 'commonjs utf-8-validate',
        bufferutil: 'commonjs bufferutil',
      },
      //{
        //'sqlite3': sqlite3,
      //},
    ],
    module: {
      rules: [
        {
          test: /\.ts$/,
          include: /src/,
          use: [{ loader: 'ts-loader' }]
        },
        {
          // css files
          test: /\.(sass|less|css)$/i,
          use: [
            {
              loader: 'style-loader'
            },
            {
              loader: 'css-loader'
            },
            {
              loader: 'less-loader',
            },
          ],
        },

        {
          test: /\.s?css$/,
          use: [
            {
              loader: MiniCssExtractPlugin.loader,
              options: {
                sourceMap: true
              }
            },
            {
              loader: 'css-loader',
              options: {
                sourceMap: true
              }
            },
            {
              loader: 'sass-loader',
              options: {
                sourceMap: true
              }
            }
          ]
        },
        {
          test: /\.(png|jpe?g|svg|gif)$/i,
          use: [
            {
              loader: "file-loader",
              options: {
                name: "[path]/[name].[ext]",
              },
            },
          ],
        },
        {
          test: /\.geojson$/,
           use: [
             {
               loader: "json-loader",
             }
          ],
        }
      ]
    },
    output: {
      path: __dirname + '/dist',
      filename: 'main.js'
    },
    node: {
      __dirname: false,
      __filename: false
    },
    experiments: {
      asyncWebAssembly: true,
      syncWebAssembly: true,
      topLevelAwait: true
    }
};

  // renderer process
var renderer_config =  {
    mode: isEnvProduction ? 'production' : 'development',
    entry: {
      // https://stackoverflow.com/questions/53477466/react-referenceerror-regeneratorruntime-is-not-defined
      app: ['./src/app/index.tsx', 'react-app-polyfill/stable'],
      app_A: './src/app_A/index_A.tsx',
      app_B: './src/app_B/index_B.tsx',
      app_C: './src/app_C/index_C.tsx',
      app_D: './src/app_D/index_D.tsx',
      app_E: './src/app_E/index_E.tsx',
      app_F: './src/app_F/index_F.tsx',
      app_G: './src/app_G/index_G.tsx',
      app_H: './src/app_H/index_H.tsx',
      app_webpdf: './src/app_webpdf/index_webpdf.tsx',
      infoBasket: './src/app/sections/infobasket/Infobasket.tsx',
      style: './src/app/styles/index.css',
      style_A: './src/app_A/styles/index.css',
      style_B: './src/app_B/styles/index.css',
      style_C: './src/app_C/styles/index.css',
      style_D: './src/app_D/styles/index.css',
      style_E: './src/app_E/styles/index.css',
      style_F: './src/app_F/styles/index.css',
      style_G: './src/app_G/styles/index.css',
      style_H: './src/app_H/styles/index.css',
      //style_leaflet: path.resolve(__dirname, 'node_modules/leaflet/dist/leaflet.css'),
      style_webpdf: './src/app_webpdf/styles/index.css'
    },
    //target: 'electron-renderer',
    //target: 'web',
    target: ['web', 'es5'],
    //node: {global: true, fs: 'empty'},
    resolve: {
      extensions: ['.jsx', '.js', '.tsx', '.ts'],
      //alias: {
        // Custom Aliases
        //...aliases,
      //},
    },
    output: {
      path: __dirname + '/dist/',
        //filename: 'renderer.js'
      filename: '[name].js',
    },
    // https://github.com/slackapi/node-slack-sdk/issues/746#issuecomment-778804407
    externals: [
      {
        'utf-8-validate': 'commonjs utf-8-validate',
        bufferutil: 'commonjs bufferutil',
        //ort: 'ort',
      },
      //{
        //'sqlite3': sqlite3,
      //},
      {
        'RedisGraph': RedisGraph,
      },
    ],
    module: {
      rules: [
        {
          test: /\.(js|ts)x?$/,
          exclude: /node_modules/,
          use: {
            loader: 'babel-loader',
          },
        },
        {
          // css files
          test: /\.css$/i,
          use: [
            {
              loader: 'style-loader'
            },
            {
              loader: 'css-loader'
            },
          ],
        },
        {
          // Font files
          test: /\.(woff|woff2|ttf|otf)$/,
          loader: 'file-loader',
          options: {
            name: '[hash].[ext]',
            outputPath: 'dist/assets/css/'
          }
        },
        {
          // image files
          test: /\.(jpe?g|png|gif|svg)$/i,
          loader: 'file-loader',
          options: {
            name: '/pics/[name].[ext]',
            outputPath: 'dist/assets/pics/'
          }
        },
        {
          // epub files
          test:/\.epub$/i,
          loader: 'file-loader',
          exclude: /node_modules/,
        }
      ],
    },
    node: {
      __dirname: false,
      __filename: false
    },
    experiments: {
      asyncWebAssembly: true,
      syncWebAssembly: true,
      topLevelAwait: true
    },
        // filename: This is the cornerstone parameter, which distingues different html templates
        // Because for each template, html-webpack-plugin produces, if not otherwise specified in filename,
        // an index.html file.
    plugins: [
      new HtmlWebpackPlugin({
        filename: 'index.html',
        template: './src/app/index.html',
        inject:'body',
        chunks: ['app'],
      }),
      new HtmlWebpackPlugin({
        filename: 'index_A.html',
        template: './src/app_A/index_A.html',
        inject: 'body',
        chunks: ['app_A']
      }),
      new HtmlWebpackPlugin({
        filename: 'index_B.html',
        template: './src/app_B/index_B.html',
        inject: 'body',
        chunks: ['app_B']
      }),
      new HtmlWebpackPlugin({
        filename: 'index_C.html',
        template: './src/app_C/index_C.html',
        inject: 'body',
        chunks: ['app_C']
      }),
      new HtmlWebpackPlugin({
        filename: 'index_D.html',
        template: './src/app_D/index_D.html',
        inject: 'body',
        chunks: ['app_D']
      }),
      new HtmlWebpackPlugin({
        filename: 'index_E.html',
        template: './src/app_E/index_E.html',
        inject: 'body',
        chunks: ['app_E']
      }),
      new HtmlWebpackPlugin({
        filename: 'index_F.html',
        template: './src/app_F/index_F.html',
        inject: 'body',
        chunks: ['app_F']
      }),
      new HtmlWebpackPlugin({
        filename: 'index_G.html',
        template: './src/app_G/index_G.html',
        inject: 'body',
        chunks: ['app_G']
      }),
      new HtmlWebpackPlugin({
        filename: 'index_H.html',
        template: './src/app_H/index_H.html',
        inject: 'body',
        chunks: ['app_H']
      }),
      new HtmlWebpackPlugin({
        filename: 'index_webpdf.html',
        template: './src/app_webpdf/index_webpdf.html',
        inject: 'body',
        chunks: ['app_webpdf']
      }),
      new HtmlWebpackPlugin({
        filename: 'viewer.html',
        template: './src/lib/pdfjs-dist/web/viewer.html',
        inject: 'body',
        chunks: ['app_viewer']
      }),
      new HtmlWebpackPlugin({
        filename: 'index_trial.html',
        template: './src/app_A/index_trial.html',
        inject: 'body',
        chunks: ['index_trial']
      }),
      new MiniCssExtractPlugin({
        filename: '[name].css',
        chunkFilename: '[id].css',
        linkType: 'text/css',
      }),
      new MiniCssExtractPlugin({
        filename: './src/lib/conversejs/converse.css'
      }),
      new CopyPlugin({
        patterns: [
          {
            from: path.resolve(__dirname, "./src/lib"),
            to: path.resolve(__dirname, "./dist/lib")
          },
          {
            from: path.resolve(__dirname, "./src/assets/css"),
            to: path.resolve(__dirname, "./dist/assets/css")
          },
          {
            from: path.resolve(__dirname, "./src/assets/pics"),
            to: path.resolve(__dirname, "./dist/assets/pics")
          },
          {
            from: path.resolve(__dirname, "./src/assets/geojson"),
            to: path.resolve(__dirname, "./dist/assets/geojson")
          },
          {
            from: path.resolve(__dirname, "./src/assets/svg"),
            to: path.resolve(__dirname, "./dist/assets/svg")
          },
          {
            from: path.resolve(__dirname, "./src/assets/epub"),
            to: path.resolve(__dirname, "./dist/assets/epub")
          },
          {
            from: path.resolve(__dirname, "./node_modules/onnxruntime-web/dist/*.wasm"),
            to: path.resolve(__dirname, "[name][ext]")
          },
          //{
            //from: path.resolve(__dirname, "./src/assets/onnx"),
            //to: path.resolve(__dirname, "./dist/assets/onnx")
          //}
        ],
        options: {
          concurrency: 100,
        },
      }),
    ]
}
module.exports = [
  main_config,
  renderer_config,
];

Other info:

"copy-webpack-plugin": "^7.0.0"
"css-minimizer-webpack-plugin": "^1.2.0",
"fork-ts-checker-webpack-plugin": "^6.1.0",
"html-webpack-plugin": "^5.1.0",
"node-polyfill-webpack-plugin": "^1.0.2"
"webpack": "^5.23.0",
"webpack-bundle-analyzer": "^4.4.0",
"webpack-cli": "^4.5.0",
"react": "^17.0.2",
"electron": "16",
node: v16.13.0
O.S.: Ubuntu 20.04 Desktop

[fs-eire]

I missed one thing. could you please try import * as ort from 'onnxruntime-web' instead of import ort from 'onnxruntime-web' and see if the problem gone.

BTW typescript should have reported warning for this.

[raphael10-collab]

With

//import ort from 'onnxruntime-web'
import * as ort from 'onnxruntime-web'

I get these errors:

failed to asynchronously prepare wasm: [object ProgressEvent]
failed to inference ONNX model: Error: no available backend found. ERR: [wasm] 
RuntimeError: abort([object ProgressEvent]). Build with -s ASSERTIONS=1 for more info.. 
Failed to load resource: net::ERR_FILE_NOT_FOUNDort-wasm-simd.wasm:1 

If I switch back to import * as ort from 'onnxruntime-web' :

import ort from 'onnxruntime-web'
//import * as ort from 'onnxruntime-web'

I get failed to inference ONNX model: TypeError: Cannot read properties of undefined (reading 'InferenceSession').

[fs-eire]

Please refer to the devtool (F12) to check the URL of file 'ort-wasm-simd.wasm' and make sure this file is served.

[raphael10-collab]

ort-wasm-simd.wasm is already located within onnxruntime-web folder of node_modules installed via yarn add :

(base) raphy@pc:~/Raphy-Template/node_modules/onnxruntime-web/dist$ ls -lah
total 51M
drwxrwxr-x 2 raphy raphy 4.0K Feb 27 22:01 .
drwxrwxr-x 6 raphy raphy 4.0K Feb 27 22:01 ..
-rw-r--r-- 1 raphy raphy 595K Feb 10 10:58 ort.es5.min.js
-rw-r--r-- 1 raphy raphy 1.8M Feb 10 10:58 ort.es5.min.js.map
-rw-r--r-- 1 raphy raphy 533K Feb 10 10:58 ort.es6.min.js
-rw-r--r-- 1 raphy raphy 1.8M Feb 10 10:58 ort.es6.min.js.map
-rw-r--r-- 1 raphy raphy 3.8M Feb 10 10:58 ort.js
-rw-r--r-- 1 raphy raphy 526K Feb 10 10:58 ort.min.js
-rw-r--r-- 1 raphy raphy 1.8M Feb 10 10:58 ort.min.js.map
-rw-r--r-- 1 raphy raphy  41K Feb 10 10:58 ort.wasm-core.min.js
-rw-r--r-- 1 raphy raphy 136K Feb 10 10:58 ort.wasm-core.min.js.map
-rw-r--r-- 1 raphy raphy 149K Feb 10 10:58 ort.wasm.min.js
-rw-r--r-- 1 raphy raphy 295K Feb 10 10:58 ort.wasm.min.js.map
-rw-r--r-- 1 raphy raphy 6.2M Feb 10 10:58 ort-wasm-simd-threaded.wasm
-rw-r--r-- 1 raphy raphy 6.9M Feb 10 10:58 ort-wasm-simd.wasm
-rw-r--r-- 1 raphy raphy  36K Feb 10 10:58 ort-wasm-threaded.js
-rw-r--r-- 1 raphy raphy 5.7M Feb 10 10:58 ort-wasm-threaded.wasm
-rw-r--r-- 1 raphy raphy 2.4K Feb 10 10:58 ort-wasm-threaded.worker.js
-rw-r--r-- 1 raphy raphy 6.5M Feb 10 10:58 ort-wasm.wasm
-rw-r--r-- 1 raphy raphy 589K Feb 10 10:58 ort-web.es5.min.js
-rw-r--r-- 1 raphy raphy 1.8M Feb 10 10:58 ort-web.es5.min.js.map
-rw-r--r-- 1 raphy raphy 527K Feb 10 10:58 ort-web.es6.min.js
-rw-r--r-- 1 raphy raphy 1.8M Feb 10 10:58 ort-web.es6.min.js.map
-rw-r--r-- 1 raphy raphy 386K Feb 10 10:58 ort.webgl.min.js
-rw-r--r-- 1 raphy raphy 1.5M Feb 10 10:58 ort.webgl.min.js.map
-rw-r--r-- 1 raphy raphy 3.7M Feb 10 10:58 ort-web.js
-rw-r--r-- 1 raphy raphy 520K Feb 10 10:58 ort-web.min.js
-rw-r--r-- 1 raphy raphy 1.8M Feb 10 10:58 ort-web.min.js.map
-rw-r--r-- 1 raphy raphy 520K Feb 10 10:58 ort-web.node.js
-rw-r--r-- 1 raphy raphy 1.8M Feb 10 10:58 ort-web.node.js.map
(base) raphy@pc:~/Raphy-Template/node_modules/onnxruntime-web/dist$ 

I tried also with import '../../../node_modules/onnxruntime-web/dist/ort-wasm-simd.wasm' but it doesn't work

[fs-eire]

No, please don't import the wasm file directly. You don't need to modify the code. The problem is because your server is not serving the file correctly. you should prepare that file under your wwwroot folder structure, with the correct path. As mentioned above, the path can be known from looking at the devtool "network" tab, by checking the URL of the 404 wasm file

[raphael10-collab]

I'm developing an electron-react-typescript-webpack app, so no wwwroot folder

Console tab:

Network tab:

[fs-eire]

you need to open the Network tab and refresh the page to check the web requests.

[raphael10-collab]

May be I found the problem... I do not understand why, but it happens that ort-wasm files go in the main folder:

(base) raphy@pc:~/Raphy-Template$ ls -lah
total 51M
drwxrwxr-x    7 raphy raphy 4.0K Mar  3 11:22 .
drwxr-xr-x   88 raphy raphy 4.0K Mar  3 11:23 ..
-rw-rw-r--    1 raphy raphy  426 Feb 22 12:37 babel.config.json
-rw-rw-r--    1 raphy raphy   39 Feb 22 12:37 .babelrc
drwxrwxr-x   23 raphy raphy 4.0K Mar  2 22:07 dist
-rw-rw-r--    1 raphy raphy  122 Mar  3 11:22 dump.rdb
-rw-rw-r--    1 raphy raphy  112 Feb 22 12:37 .editorconfig
-rw-rw-r--    1 raphy raphy  23M Feb 22 12:37 eng.traineddata
-rw-rw-r--    1 raphy raphy 654K Feb 22 12:37 .eslintcache
-rw-rw-r--    1 raphy raphy  327 Feb 22 12:37 .eslintrc
drwxrwxr-x    8 raphy raphy 4.0K Mar  2 21:54 .git
-rw-rw-r--    1 raphy raphy  145 Feb 22 12:37 .lintstagedrc
-rw-rw-r--    1 raphy raphy  28K Feb 22 12:37 node-canvasInstallConfig.txt
drwxrwxr-x 2295 raphy raphy  68K Mar  3 10:48 node_modules
-rw-rw-r--    1 raphy raphy  11K Feb 25 08:57 OLDwebpack.config.js
-rw-rw-r--    1 raphy raphy 6.2M Mar  3 11:01 ort-wasm-simd-threadedwasm
-rw-rw-r--    1 raphy raphy 6.9M Mar  3 11:01 ort-wasm-simdwasm
-rw-rw-r--    1 raphy raphy 5.7M Mar  3 11:01 ort-wasm-threadedwasm
-rw-rw-r--    1 raphy raphy 6.5M Mar  3 11:01 ort-wasmwasm
-rw-rw-r--    1 raphy raphy 9.5K Mar  3 10:48 package.json
-rw-rw-r--    1 raphy raphy   87 Feb 22 12:37 .prettierignore
-rw-rw-r--    1 raphy raphy    3 Feb 22 12:37 .prettierrc.json
drwxrwxr-x   24 raphy raphy 4.0K Feb 22 12:37 src
-rw-rw-r--    1 raphy raphy   24 Feb 22 12:37 style.css
drwxrwxr-x    2 raphy raphy 4.0K Feb 22 12:37 supportingScripts
-rw-rw-r--    1 raphy raphy  226 Feb 22 12:37 test.js
-rw-rw-r--    1 raphy raphy  741 Feb 22 12:37 tsconfig.json
-rw-rw-r--    1 raphy raphy  11K Feb 27 10:17 webpack.config.js
-rw-rw-r--    1 raphy raphy 1.2M Mar  3 10:48 yarn.lock
(base) raphy@pc:~/Raphy-Template$ 

But I do not understand why it happens, since I didn't specified any path...

Anyway..... I created a brand new electron project with the bare minimum requirements in order to let you experiment and detect what's going on

Steps to reproduce everything: 1) git clone https://github.com/raphael10-collab/OnnxWebPlaying.git 2) cd OnnxWebPlaying 3) yarn type-check 4) in a second screen: yarn start

[fs-eire]

The default behavior is to find the corresponding .wasm file (one of the 4, depending on whether SIMD and MT are supported) in the same directory of the current JavaScript file (this is your bundle.js generated by webpack).

The incorrect behavior is very likely to be caused by wrong copy plugin configuration in your webpack (or other tools that used to copy artifacts).

I found this in your webpack.config.js as shared above:

          {
            from: path.resolve(__dirname, "./node_modules/onnxruntime-web/dist/*.wasm"),
            to: path.resolve(__dirname, "[name][ext]")
          },

[raphael10-collab]

Based on the already working css settings:

      {
        from: path.resolve(__dirname, "./src/assets/css"),
        to: path.resolve(__dirname, "./dist/assets/css")
      },

I copied the entire /node_modules/onnxruntime-web/dist/ folder to /src/assets/onnxruntime-web folder

I set in webpack.config.js :

  new CopyPlugin({
    patterns: [
      {
        from: path.resolve(__dirname, "./src/assets/css"),
        to: path.resolve(__dirname, "./dist/assets/css")
      },
      {
        from: path.resolve(__dirname, ".src/assets/onnxruntime-web/*wasm"),
        to: path.resolve(__dirname, "/dist/assets/onnxruntime-web/*wasm")
      },
    ],

But I get the error ERROR in unable to locate '/home/raphy/OnnxWebPlaying/.src/assets/onnxruntime-web/*wasm' glob

I discovered that even if in package.json I've set:

  "standard": {
    "ignore": [
      "/src/css/",
      "node_modules/",
      "dist/"
    ]
  },
  "build": {
    "files": [
      "./dist/**/*",
      "./dist/index.html",
      "./src/*.js",
      "./src/*.wasm"
    ],
    "extraFiles": [
      "./src/*.json",
      "./src/*.css",
      "./src/*.svg",
      "./src/*.onnx",
      "./src/*.wasm",
      "./src/assets/**/*"
    ],
    "extraResources": [
      "./src/assets/**"
    ],

.wasm files that are present in /src/assets/onnxruntime-web folder :

(base) raphy@pc:~/OnnxWebPlaying/src/assets/onnxruntime-web$ ls -lah
total 51M
drwxrwxr-x 2 raphy raphy 4.0K Mar  4 09:52 .
drwxrwxr-x 4 raphy raphy 4.0K Mar  4 10:23 ..
-rw-r--r-- 1 raphy raphy 595K Feb 10 10:58 ort.es5.min.js
-rw-r--r-- 1 raphy raphy 1.8M Feb 10 10:58 ort.es5.min.js.map
-rw-r--r-- 1 raphy raphy 533K Feb 10 10:58 ort.es6.min.js
-rw-r--r-- 1 raphy raphy 1.8M Feb 10 10:58 ort.es6.min.js.map
-rw-r--r-- 1 raphy raphy 3.8M Feb 10 10:58 ort.js
-rw-r--r-- 1 raphy raphy 526K Feb 10 10:58 ort.min.js
-rw-r--r-- 1 raphy raphy 1.8M Feb 10 10:58 ort.min.js.map
-rw-r--r-- 1 raphy raphy  41K Feb 10 10:58 ort.wasm-core.min.js
-rw-r--r-- 1 raphy raphy 136K Feb 10 10:58 ort.wasm-core.min.js.map
-rw-r--r-- 1 raphy raphy 149K Feb 10 10:58 ort.wasm.min.js
-rw-r--r-- 1 raphy raphy 295K Feb 10 10:58 ort.wasm.min.js.map
-rw-r--r-- 1 raphy raphy 6.2M Feb 10 10:58 ort-wasm-simd-threaded.wasm
-rw-r--r-- 1 raphy raphy 6.9M Feb 10 10:58 ort-wasm-simd.wasm
-rw-r--r-- 1 raphy raphy  36K Feb 10 10:58 ort-wasm-threaded.js
-rw-r--r-- 1 raphy raphy 5.7M Feb 10 10:58 ort-wasm-threaded.wasm
-rw-r--r-- 1 raphy raphy 2.4K Feb 10 10:58 ort-wasm-threaded.worker.js
-rw-r--r-- 1 raphy raphy 6.5M Feb 10 10:58 ort-wasm.wasm
-rw-r--r-- 1 raphy raphy 589K Feb 10 10:58 ort-web.es5.min.js
-rw-r--r-- 1 raphy raphy 1.8M Feb 10 10:58 ort-web.es5.min.js.map
-rw-r--r-- 1 raphy raphy 527K Feb 10 10:58 ort-web.es6.min.js
-rw-r--r-- 1 raphy raphy 1.8M Feb 10 10:58 ort-web.es6.min.js.map
-rw-r--r-- 1 raphy raphy 386K Feb 10 10:58 ort.webgl.min.js
-rw-r--r-- 1 raphy raphy 1.5M Feb 10 10:58 ort.webgl.min.js.map
-rw-r--r-- 1 raphy raphy 3.7M Feb 10 10:58 ort-web.js
-rw-r--r-- 1 raphy raphy 520K Feb 10 10:58 ort-web.min.js
-rw-r--r-- 1 raphy raphy 1.8M Feb 10 10:58 ort-web.min.js.map
-rw-r--r-- 1 raphy raphy 520K Feb 10 10:58 ort-web.node.js
-rw-r--r-- 1 raphy raphy 1.8M Feb 10 10:58 ort-web.node.js.map

are not copied to the corresponding folder in dist:

(base) raphy@pc:~/OnnxWebPlaying/dist/assets/onnxruntime-web$ ls -lah
total 12M
drwxrwxr-x 2 raphy raphy 4.0K Mar  4 11:26 .
drwxrwxr-x 4 raphy raphy 4.0K Mar  4 11:26 ..
-rw-rw-r-- 1 raphy raphy 4.2M Mar  4 11:26 ort.js
-rw-rw-r-- 1 raphy raphy 993K Mar  4 11:26 ort.js.map
-rw-rw-r-- 1 raphy raphy  45K Mar  4 11:26 ort-wasm-threaded.js
-rw-rw-r-- 1 raphy raphy  80K Mar  4 11:26 ort-wasm-threaded.js.map
-rw-rw-r-- 1 raphy raphy 3.1K Mar  4 11:26 ort-wasm-threaded.worker.js
-rw-rw-r-- 1 raphy raphy 4.0K Mar  4 11:26 ort-wasm-threaded.worker.js.map
-rw-rw-r-- 1 raphy raphy 4.1M Mar  4 11:26 ort-web.js
-rw-rw-r-- 1 raphy raphy 977K Mar  4 11:26 ort-web.js.map
-rw-rw-r-- 1 raphy raphy 655K Mar  4 11:26 ort-web.node.js
-rw-rw-r-- 1 raphy raphy 846K Mar  4 11:26 ort-web.node.js.map

[raphael10-collab]

@fs-eire

With wepack.config.js :

      new CopyPlugin({
        patterns: [
          {
            from: path.resolve(__dirname, "./src/assets/wasm"),
            to: path.resolve(__dirname, "./dist/assets/wasm")
          },
          {
            from: path.resolve(__dirname, "./src/assets/onnx"),
            to: path.resolve(__dirname, "./dist/assets/onnx")
          }

All the .wasm files are correctly copied to the /dist/ folder :

(base) raphy@pc:~/OnnxWebPlaying/dist/assets/onnxruntime-web$ ls -lah
total 53M
drwxrwxr-x 2 raphy raphy 4.0K Mar 10 19:51 .
drwxrwxr-x 4 raphy raphy 4.0K Mar 10 19:51 ..
-rw-rw-r-- 1 raphy raphy 595K Mar 10 19:51 ort.es5.min.js
-rw-rw-r-- 1 raphy raphy 1.8M Mar 10 19:51 ort.es5.min.js.map
-rw-rw-r-- 1 raphy raphy 533K Mar 10 19:51 ort.es6.min.js
-rw-rw-r-- 1 raphy raphy 1.8M Mar 10 19:51 ort.es6.min.js.map
-rw-rw-r-- 1 raphy raphy 3.8M Mar 10 19:51 ort.js
-rw-rw-r-- 1 raphy raphy 993K Mar 10 19:51 ort.js.map
-rw-rw-r-- 1 raphy raphy 526K Mar 10 19:51 ort.min.js
-rw-rw-r-- 1 raphy raphy 1.8M Mar 10 19:51 ort.min.js.map
-rw-rw-r-- 1 raphy raphy  41K Mar 10 19:51 ort.wasm-core.min.js
-rw-rw-r-- 1 raphy raphy 136K Mar 10 19:51 ort.wasm-core.min.js.map
-rw-rw-r-- 1 raphy raphy 149K Mar 10 19:51 ort.wasm.min.js
-rw-rw-r-- 1 raphy raphy 295K Mar 10 19:51 ort.wasm.min.js.map
-rw-rw-r-- 1 raphy raphy 6.2M Mar 10 19:51 ort-wasm-simd-threaded.wasm
-rw-rw-r-- 1 raphy raphy 6.9M Mar 10 19:51 ort-wasm-simd.wasm
-rw-rw-r-- 1 raphy raphy  36K Mar 10 19:51 ort-wasm-threaded.js
-rw-rw-r-- 1 raphy raphy  80K Mar 10 19:51 ort-wasm-threaded.js.map
-rw-rw-r-- 1 raphy raphy 5.7M Mar 10 19:51 ort-wasm-threaded.wasm
-rw-rw-r-- 1 raphy raphy 2.4K Mar 10 19:51 ort-wasm-threaded.worker.js
-rw-rw-r-- 1 raphy raphy 4.0K Mar 10 19:51 ort-wasm-threaded.worker.js.map
-rw-rw-r-- 1 raphy raphy 6.5M Mar 10 19:51 ort-wasm.wasm
-rw-rw-r-- 1 raphy raphy 589K Mar 10 19:51 ort-web.es5.min.js
-rw-rw-r-- 1 raphy raphy 1.8M Mar 10 19:51 ort-web.es5.min.js.map
-rw-rw-r-- 1 raphy raphy 527K Mar 10 19:51 ort-web.es6.min.js
-rw-rw-r-- 1 raphy raphy 1.8M Mar 10 19:51 ort-web.es6.min.js.map
-rw-rw-r-- 1 raphy raphy 386K Mar 10 19:51 ort.webgl.min.js
-rw-rw-r-- 1 raphy raphy 1.5M Mar 10 19:51 ort.webgl.min.js.map
-rw-rw-r-- 1 raphy raphy 3.7M Mar 10 19:51 ort-web.js
-rw-rw-r-- 1 raphy raphy 977K Mar 10 19:51 ort-web.js.map
-rw-rw-r-- 1 raphy raphy 520K Mar 10 19:51 ort-web.min.js
-rw-rw-r-- 1 raphy raphy 1.8M Mar 10 19:51 ort-web.min.js.map
-rw-rw-r-- 1 raphy raphy 520K Mar 10 19:51 ort-web.node.js
-rw-rw-r-- 1 raphy raphy 1.8M Mar 10 19:51 ort-web.node.js.map

But still with:

let session = await ort.InferenceSession.create('../../assets/onnxruntime-web/model.onnx')

I get failed to inference ONNX model: TypeError: Cannot read properties of undefined (reading 'InferenceSession').

Steps to reproduce everything:

git clone https://github.com/raphael10-collab/OnnxWebPlaying.git
cd OnnxWebPlaying
yarn type-check
in a second screen: yarn start

[fs-eire]

please take a look at https://github.com/fs-eire/OnnxWebPlaying/commit/2cab936340e80e38458c6e9431fe49bb4c982abe for a fix.

since you dont' include the ONNX model file in the repo, this fix resolved all issues before the one complains "model not found".

[raphael10-collab]

Hi @fs-eire !

  new CopyPlugin({
    patterns: [
      {
        from: path.resolve(__dirname, "./src/assets/css"),
        to: path.resolve(__dirname, "./dist/assets/css")
      },
      {
        from: path.resolve(__dirname, "./node_modules/onnxruntime-web/dist"),
        to: path.resolve(__dirname, "./dist/assets/onnxruntime-web")
      },
      {
        from: path.resolve(__dirname, "./src/assets/onnx-models"),
        to: path.resolve(__dirname, "./dist/assets/onnx-models")
      }
    ],

Now it works fine:

data of result rensor 'c': 700,800,900,1580,1840,2100,2460,2880,3300  App.tsx: 43 

Thank you very much for your kind help