[Web] 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.

[yang-junhua]

Describe the issue

package.json： { "name": "mall", "version": "0.1.0", "private": true, "scripts": { "dev": "vue-cli-service serve --mode dev", "build:test": "vue-cli-service build --mode test", "build:prod": "vue-cli-service build --mode prod", "lint": "vue-cli-service lint" }, "dependencies": { "axios": "^1.6.5", "core-js": "^3.6.5", "element-ui": "^2.15.14", "normalize.css": "^8.0.1", "npyjs": "^0.4.0", "onnxruntime-web": "^1.14.0", "underscore": "^1.13.6", "vue": "^2.6.11", "vue-router": "^3.2.0", "vuex": "^3.4.0" }, "devDependencies": { "@vue/cli-plugin-babel": "~4.5.4", "@vue/cli-plugin-eslint": "~4.5.4", "@vue/cli-plugin-router": "~4.5.4", "@vue/cli-plugin-vuex": "~4.5.4", "@vue/cli-service": "~4.5.4", "@vue/eslint-config-prettier": "^6.0.0", "babel-eslint": "^10.1.0", "babel-plugin-component": "^1.1.1", "compression-webpack-plugin": "^6.1.1", "copy-webpack-plugin": "^5.1.2", "eslint": "^6.7.2", "eslint-plugin-prettier": "^3.3.1", "eslint-plugin-vue": "^6.2.2", "friendly-errors-webpack-plugin": "^1.7.0", "html-webpack-plugin": "^4.5.2", "image-webpack-loader": "^7.0.1", "prettier": "^2.2.1", "process": "^0.11.10", "sass": "^1.26.5", "sass-loader": "^8.0.2", "script-ext-html-webpack-plugin": "^2.1.5", "uglifyjs-webpack-plugin": "^2.2.0", "vue-template-compiler": "^2.6.11" } }

vue.config.js：

const UglifyJsPlugin = require("uglifyjs-webpack-plugin"); const CompressionWebpackPlugin = require("compression-webpack-plugin"); const CopyPlugin = require("copy-webpack-plugin"); const FriendlyErrorsWebpackPlugin = require("friendly-errors-webpack-plugin"); const productionGzipExtensions = ["js", "css", "html", "ttf", "eot", "woff"]; const path = require("path"); const webpack = require("webpack"); function resolve(dir) { return path.join(__dirname, dir); } module.exports = { publicPath: "/", outputDir: "dist", assetsDir: "static", lintOnSave: process.env.NODE_ENV === "development", productionSourceMap: false, devServer: { hot: true, // enable HMR on the server open: true, // These headers enable the cross origin isolation state // needed to enable use of SharedArrayBuffer for ONNX // multithreading. headers: { "Cross-Origin-Opener-Policy": "same-origin", "Cross-Origin-Embedder-Policy": "credentialless", }, }, configureWebpack: (config) => {

config.plugins.push(
  new FriendlyErrorsWebpackPlugin(),
  new CopyPlugin([
    {
      from: "node_modules/onnxruntime-web/dist/*.wasm",
      to: "[name].[ext]",
    },
    {
      from: "src/assets",
      to: "assets",
    },
  ]),
  new webpack.ProvidePlugin({
    process: "process/browser",
  })
);

if (process.env.NODE_ENV === "production") {
  config.plugins.push(

    new UglifyJsPlugin({
      uglifyOptions: {
        compress: {
          drop_debugger: true, 
          drop_console: true,
          pure_funcs: ["console.log"], 
        },
        warnings: false,
      },
      sourceMap: false,
      parallel: true, 
    }),

    new CompressionWebpackPlugin({
      filename: "[path].gz[query]",
      algorithm: "gzip",
      test: new RegExp("\\.(" + productionGzipExtensions.join("|") + ")$"),
      threshold: 10240,
      minRatio: 0.8,
      deleteOriginalAssets: false,
    })
  );
}

Object.assign(config, {
  resolve: {
    alias: {
      "@": resolve("src"),
    },
  },
  name: "mall",
});

}, chainWebpack: (config) => { config.plugin("preload").tap(() => [ { rel: "preload", // to ignore runtime.js // https://github.com/vuejs/vue-cli/blob/dev/packages/@vue/cli-service/lib/config/app.js#L171 fileBlacklist: [/.map$/, /hot-update.js$/, /runtime..*.js$/], include: "initial", }, ]);

config.plugins.delete("prefetch");

config.module
  .rule("images")
  .use("image-webpack-loader")
  .loader("image-webpack-loader")
  .options({
    bypassOnDebug: true,
  })
  .end();

config.when(process.env.NODE_ENV !== "development", (config) => {
  config
    .plugin("ScriptExtHtmlWebpackPlugin")
    .after("html")
    .use("script-ext-html-webpack-plugin", [
      {
        // `runtime` must same as runtimeChunk name. default is `runtime`
        inline: /runtime\..*\.js$/,
      },
    ])
    .end();

  config.optimization.splitChunks({
    chunks: "all",
    cacheGroups: {
      libs: {
        name: "chunk-vendors",
        test: /[\\/]node_modules[\\/]/,
        priority: -10,
        chunks: "initial", // only package third parties that are initially dependent
      },
      elementUI: {
        name: "chunk-elementUI", // split elementUI into a single package
        priority: 20, // the weight needs to be larger than libs and app or it will be packaged into libs or app
        test: /[\\/]node_modules[\\/]_?element-ui(.*)/, // in order to adapt to cnpm
      },
      commons: {
        name: "chunk-commons",
        test: resolve("src/components"), // can customize your rules
        minChunks: 3, //  minimum common number
        priority: 5,
        reuseExistingChunk: true,
      },
    },
  });
  // https:// webpack.js.org/configuration/optimization/#optimizationruntimechunk
  config.optimization.runtimeChunk("single");
});

}, css: { loaderOptions: { scss: { prependData: @import "@/styles/variables.scss";, }, }, }, };

To reproduce

async initModel() { try { if (MODEL_DIR === undefined) return; const URL = MODEL_DIR; const model = await InferenceSession.create(URL); this.setModel(model); } catch (e) { console.log(e); } },

Urgency

urgency

ONNX Runtime Installation

Released Package

ONNX Runtime Version or Commit ID

1.14.0

Execution Provider

'wasm'/'cpu' (WebAssembly CPU)

[fs-eire]

Looks like a similar issue to #19829 #19556 #11413. Please refer to https://github.com/microsoft/onnxruntime/issues/19829#issuecomment-1986524595

In short, make sure:

• The .wasm files are correctly deployed
• The .wasm files should be in the same path(folder) to your bundle.js
• If they are not in the same path, use ort.env.wasm.wasmPaths to override the path of the .wasm files

[github-actions[bot]]

This issue has been automatically marked as stale due to inactivity and will be closed in 30 days if no further activity occurs. If further support is needed, please provide an update and/or more details.