microsoft / microsoft/onnxruntime-inference-examples

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

Open
#491 3 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
C++
Stars
1.7k
Forks
414
Avg merge
1d 6h
Merged PRs (30d)
14

Description

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

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with examples/nextjs/next.config.js and the webpack plugin that copies files into public, then reproduce the failure with the example's next build script. Compare the handling of public/ort-wasm-simd-threaded.mjs during development and production builds; done means the Next.js production build completes without the reported Terser parse error.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, next.js, webpack
Domain
build-system, web-dev
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.