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

[raphael10-collab]

Bug report

Two weeks ago I opened a thread in StackOverFlow asking for help about ONNX not "read"/"loaded" by webpack:
https://stackoverflow.com/questions/71067989/failed-to-inference-onnx-model-typeerror-cannot-read-properties-of-undefined

but didn't receive any help.

I wrote a GitHub's issue in the Microsoft's ONNX page: microsoft/onnxruntime#10516
and, according to them : microsoft/onnxruntime#10516 (comment)
, in order to be able to load ONNX through webpack, the webpack.config.js should have these traits:
onnxruntime-web NOT in externals , target: web, and NO alias.

What is the current behavior?

If the current behavior is a bug, please provide the steps to reproduce.

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

This is my complete webpack.config.js of my Electron-React-Typescript-Webpack app:

    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").Graph;
    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_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_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_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_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];
    module.exports = [
      main_config,
      renderer_config,
    ];

Microsoft's ONNX people suggested this: "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"

So.... what else has to be included and / or modified in the webpack.config.js file, in order to make webpack correctly see and load onnxruntime-web ?

What is the expected behavior?

onnxruntime-web should be recognized and loaded

Other relevant information:
webpack version:
Node.js version:
Operating System:
Additional tools:

"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

[alexander-akait]

Please create reproducible test repo

[raphael10-collab]

@alexander-akait

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

[raphael10-collab]

@alexander-akait

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

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

[Divine-Cipher-Cells]

Hello I am new to open source but want to contribute into this could you please provide me the resources required to contribute into it

[vankop]

your example is very huge.. so very hard to actually understand problem. Could you reduce repo to particularly part that should work? from upstream issue as I understand you need some help with configuration, but it is hard to understand what you want to achieve..

[raphael10-collab]

Hi @vankop !!

Thanks to Microsoft people of ONNX package I solved the issue . Anyway, I thank for your kind availability

[rDarge]

@raphael10-collab
What was the solution?