Next.js issue building for production because of ort-wasm-simd-threaded.mjs

[ricky0123]

Hi, I maintain a library that depends on onnxruntime-web that people frequently use with nextjs. I maintain a nextjs example here. However, I am struggling to package it properly. Right now, I copy all the necessary wasm files to the public directory using a webpack plugin. It does run properly using next's "dev" script, but when I try to create a production build using the build script, I get the error shown below. Is there an official nextjs example? Do you have any tips for packaging onnxruntime-web within nextjs apps?

> nextjs@0.1.0 build
> next build

(node:205204) [DEP0040] DeprecationWarning: The `punycode` module is deprecated. Please use a userland alternative instead.
(Use `node --trace-deprecation ...` to show where the warning was created)
info  - Linting and checking validity of types  
Failed to compile.

../public/ort-wasm-simd-threaded.mjs from Terser
  x Illegal 'use strict' directive in function with non-simple parameter list.
    ,-[7:1]
  7 |   var moduleRtn;
  8 | 
  9 | function aa(){g.buffer!=l.buffer&&m();return l}function n(){g.buffer!=l.buffer&&m();return ba}function r(){g.buffer!=l.buffer&&m();return ca}function u(){g.buffer!=l.buffer&&m();return da}function ea(){g.buffer!=l.buffer&&m();return fa}var w=Object.assign({},moduleArg),ha,x,ia=new Promise((a,b)=>{ha=a;x=b}),ja="object"==typeof window,A="function"==typeof importScripts,B="object"==typeof process&&"object"==typeof process.versions&&"string"==typeof process.versions.node,C=A&&"em-pthread"==self.name;
 10 | if(B){const {createRequire:a}=await import("module");var require=a(import.meta.url),D=require("worker_threads");global.Worker=D.Worker;C=(A=!D.lb)&&"em-pthread"==D.workerData}"use strict";w.mountExternalData=(a,b)=>{(w.Ua||(w.Ua=new Map)).set(a,b)};w.unmountExternalData=()=>{delete w.Ua};
    :                                                                                                                                                                                ^^^^^^^^^^^^^
 11 | var SharedArrayBuffer=globalThis.SharedArrayBuffer??(new WebAssembly.Memory({initial:0,maximum:0,shared:!0})).buffer.constructor,ka=Object.assign({},w),la="./this.program",E=(a,b)=>{throw b;},F="",ma,G,H;
 12 | if(B){var fs=require("fs"),na=require("path");F=require("url").fileURLToPath(new URL("./",import.meta.url));ma=(a,b)=>{a=oa(a)?new URL(a):na.normalize(a);return fs.readFileSync(a,b?void 0:"utf8")};H=a=>{a=ma(a,!0);a.buffer||(a=new Uint8Array(a));return a};G=(a,b,c,d=!0)=>{a=oa(a)?new URL(a):na.normalize(a);fs.readFile(a,d?void 0:"utf8",(f,h)=>{f?c(f):b(d?h.buffer:h)})};!w.thisProgram&&1<process.argv.length&&(la=process.argv[1].replace(/\\/g,"/"));process.argv.slice(2);E=(a,b)=>{process.exitCode=
 13 | a;throw b;}}else if(ja||A)A?F=self.location.href:"undefined"!=typeof document&&document.currentScript&&(F=document.currentScript.src),_scriptName&&(F=_scriptName),F.startsWith("blob:")?F="":F=F.substr(0,F.replace(/[?#].*/,"").lastIndexOf("/")+1),B||(ma=a=>{var b=new XMLHttpRequest;b.open("GET",a,!1);b.send(null);return b.responseText},A&&(H=a=>{var b=new XMLHttpRequest;b.open("GET",a,!1);b.responseType="arraybuffer";b.send(null);return new Uint8Array(b.response)}),G=(a,b,c)=>{var d=new XMLHttpRequest;
    `----

Caused by:
    0: failed to parse input file
    1: Syntax Error
Error: 
  x Illegal 'use strict' directive in function with non-simple parameter list.
    ,-[7:1]
  7 |   var moduleRtn;
  8 | 
  9 | function aa(){g.buffer!=l.buffer&&m();return l}function n(){g.buffer!=l.buffer&&m();return ba}function r(){g.buffer!=l.buffer&&m();return ca}function u(){g.buffer!=l.buffer&&m();return da}function ea(){g.buffer!=l.buffer&&m();return fa}var w=Object.assign({},moduleArg),ha,x,ia=new Promise((a,b)=>{ha=a;x=b}),ja="object"==typeof window,A="function"==typeof importScripts,B="object"==typeof process&&"object"==typeof process.versions&&"string"==typeof process.versions.node,C=A&&"em-pthread"==self.name;
 10 | if(B){const {createRequire:a}=await import("module");var require=a(import.meta.url),D=require("worker_threads");global.Worker=D.Worker;C=(A=!D.lb)&&"em-pthread"==D.workerData}"use strict";w.mountExternalData=(a,b)=>{(w.Ua||(w.Ua=new Map)).set(a,b)};w.unmountExternalData=()=>{delete w.Ua};
    :                                                                                                                                                                                ^^^^^^^^^^^^^
 11 | var SharedArrayBuffer=globalThis.SharedArrayBuffer??(new WebAssembly.Memory({initial:0,maximum:0,shared:!0})).buffer.constructor,ka=Object.assign({},w),la="./this.program",E=(a,b)=>{throw b;},F="",ma,G,H;
 12 | if(B){var fs=require("fs"),na=require("path");F=require("url").fileURLToPath(new URL("./",import.meta.url));ma=(a,b)=>{a=oa(a)?new URL(a):na.normalize(a);return fs.readFileSync(a,b?void 0:"utf8")};H=a=>{a=ma(a,!0);a.buffer||(a=new Uint8Array(a));return a};G=(a,b,c,d=!0)=>{a=oa(a)?new URL(a):na.normalize(a);fs.readFile(a,d?void 0:"utf8",(f,h)=>{f?c(f):b(d?h.buffer:h)})};!w.thisProgram&&1<process.argv.length&&(la=process.argv[1].replace(/\\/g,"/"));process.argv.slice(2);E=(a,b)=>{process.exitCode=
 13 | a;throw b;}}else if(ja||A)A?F=self.location.href:"undefined"!=typeof document&&document.currentScript&&(F=document.currentScript.src),_scriptName&&(F=_scriptName),F.startsWith("blob:")?F="":F=F.substr(0,F.replace(/[?#].*/,"").lastIndexOf("/")+1),B||(ma=a=>{var b=new XMLHttpRequest;b.open("GET",a,!1);b.send(null);return b.responseText},A&&(H=a=>{var b=new XMLHttpRequest;b.open("GET",a,!1);b.responseType="arraybuffer";b.send(null);return new Uint8Array(b.response)}),G=(a,b,c)=>{var d=new XMLHttpRequest;
    `----

Caused by:
    0: failed to parse input file
    1: Syntax Error

> Build failed because of webpack errors

[prathikr]

Hi @ricky0123

Nextjs is a react-native application, have you tried using the packages in onnxruntime-react-native instead?

[ricky0123]

Hi @prathikr that's not quite correct, nextjs is a framework for building websites based on react. React-native is for building mobile applications

[prathikr]

@ricky0123 looks like there are many issues with webpack bundler. We are tracking with https://github.com/microsoft/onnxruntime/issues/22615

Sorry, I am unable to provide any quicker resolution. Please track the above PR as this will be a big change on our end to clean up webpack support.