[Tracking] WebLLM: Frontend Compatibility Issues and CDN Delivery

[CharlieFRuan]

This issue tracks the resolution to various front-end compatibility issues.

Action items

• Address require() issues
• Address perf_hooks import issue
• Add CDN delivery

require() issue in next projects

This file is being treated as an ES module because it has a '.js' file extension and '\web-llm\examples\next-simple-chat\node_modules\@mlc-ai\web-llm\package.json' contains "type": "module". To treat it as a CommonJS script, rename it to use the '.cjs' file extension.

This error has been reported in various issues:

• Next example doesn't work unless source is built #140
• [Vue/Vite/Nuxt] Build Error: require is not defined in ES module scope, you can use import instead #353
  • The error in this issue for some reason stems from web-tokenizer rather than web-llm (though the _scriptDir part is indeed from web-tokenizer)
• next-simple chat - ReferenceError: require is not defined in ES module scope, you can use import instead #383

Revisit after the following PR is merged and npm is updated, should be able to resolve all issues above:

• [Next][Fix] Remove require() in index.js for scriptDir #397

perf_hooks issue

This error is reported in issues:

• Module not found: Can't resolve 'perf_hooks' & 'module' #127
• Feature request: JS CDN file for web LLM #258

[CharlieFRuan]

Completed in 0.2.36 via:

• [Next][Fix] Remove require() in index.js for scriptDir #397
• [Fix] Remove perf hooks import from index.js #406

[flatsiedatsie]

It's so nice to finally be able to easily copy from the examples! Thank you!