onnxruntime/js/web/test/e2e/exports/testcases/nextjs-default.md
Yulong Wang 0627a6cb93
[js/web] fix package export for bundlers (#23257)
### Description
<!-- Describe your changes. -->

This PR tries to fix #22615. (see detailed description in the issue)

A perfect solution would be too difficult to make, because there are a
huge number of combinations of usage scenarios, including combinations
of development framework, bundler, dev/prod mode, and so on.

This PR is using the following approach:
- Introduce a new type of end to end test: export test. This type of
tests are complete web apps that use popular web development frameworks,
and the tests are using puppeteer to run the apps and check if the apps
can run without error.
  - added one nextjs based web app and one vite based web app.
- In the test, perform the following test steps:
  - `npm install` for packages built locally
- `npm run dev` to start dev server and use puppeteer to launch the
browser to test
- `npm run build && npm run start` to test prod build and use puppeteer
to launch the browser to test
- Make changes to ort-web, including:
- special handling on Webpack's behavior of rewriting `import.meta.url`
to a `file://` string
  - revise build definitions
  - fix wasm URL for proxy, if used in a bundled build
2025-01-09 11:01:00 -08:00

1.8 KiB

nextjs-default

Summary

This is a Next.js application created by npx create-next-app@latest using the following config:

<ORT_ROOT>\js\web\test\e2e\exports\testcases>npx create-next-app@latest

√ What is your project named? ... nextjs-default
√ Would you like to use TypeScript? ... No
√ Would you like to use ESLint? ... No
√ Would you like to use Tailwind CSS? ... No
√ Would you like your code inside a `src/` directory? ... No
√ Would you like to use App Router? (recommended) ... No
√ Would you like to use Turbopack for `next dev`? ... No
√ Would you like to customize the import alias (`@/*` by default)? ... No
Creating a new Next.js app in <ORT_ROOT>\js\web\test\e2e\exports\testcases\nextjs-default.

Using npm.

Initializing project with template: app


Installing dependencies:
- react
- react-dom
- next

Small changes were made based on the application template, including:

  • Remove default Logos, images, CSS and SVG
  • Add a client side rendering (CSR) component which contains:
    • a checkbox for multi-thread
    • a checkbox for proxy
    • a "Load Model" button
    • a "Run Model" button
    • a state DIV
    • a log DIV
  • Add a helper module for creating ORT session and run

Tests

Uses puppeteer to simulate the following tests:

  • Tests on npm run dev (dev server)
    • multi-thread OFF, proxy OFF
    • multi-thread OFF, proxy ON
    • multi-thread ON, proxy OFF
    • multi-thread ON, proxy ON
  • Tests on npm run dev -- --turbopack (dev server using TurboPack)
    • multi-thread OFF, proxy OFF
    • multi-thread OFF, proxy ON
    • multi-thread ON, proxy OFF
    • multi-thread ON, proxy ON
  • Tests on npm run build + npm run start (prod)
    • multi-thread OFF, proxy OFF
    • multi-thread OFF, proxy ON
    • multi-thread ON, proxy OFF
    • multi-thread ON, proxy ON