Next example doesn't work unless source is built

[narangkay]

The next example only seems to work when the source is built locally, and not when it's installed from npm.

Weirdly enough, if I install the source locally and then switch to using the prebuilt npm package, it works :/

Trial 1: Using prebuilt npm package only

1. Don't build the web-llm repo from source
2. Set the dependency in package,json to the prebuilt package

...
    "@mlc-ai/web-llm": "^0.2.2",
...

3. install and run

npm install
npm run dev

4. Run fails

Trial 2: Using prebuilt npm package after locally installing web-llm

1. Build the web-llm repo from source
2. Set the dependency in package,json to the prebuilt package

...
    "@mlc-ai/web-llm": "^0.2.2",
...

3. install and run

npm install
npm run dev

4. Run succeeds

Trial 3: Building from source

1. Build the web-llm repo from source
2. Set the dependency in package,json to the local package

...
    "@mlc-ai/web-llm": "../..",
...

3. install and run

npm install
npm run dev

4. Run succeeds

I'm a bit flummoxed as to why 1 doesn't work but 2 and 3 work. Specially 2 is surprising to me.

[tqchen]

Get it.. this is surprising, would be useful to look into the difference. I wonder if it has to do with way things are bundled

[djaffer]

getting this error:

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.
    at file:///web-llm/examples/next-simple-chat/node_modules/@mlc-ai/web-llm/lib/index.js:3612:76
    at file:///web-llm/examples/next-simple-chat/node_modules/@mlc-ai/web-llm/lib/index.js:3624:7
    at file:///web-llm/examples/next-simple-chat/node_modules/@mlc-ai/web-llm/lib/index.js:3556:5
    at file:///web-llm/examples/next-simple-chat/node_modules/@mlc-ai/web-llm/lib/index.js:3557:3
    at file:///web-llm/examples/next-simple-chat/node_modules/@mlc-ai/web-llm/lib/index.js:3751:2
    at ModuleJob.run (node:internal/modules/esm/module_job:194:25) {
  digest: undefined
}
- error Error [ReferenceError]: require is not defined in ES module scope, you can use import instead
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.
    at file:///web-llm/examples/next-simple-chat/node_modules/@mlc-ai/web-llm/lib/index.js:3612:76
    at file:///web-llm/examples/next-simple-chat/node_modules/@mlc-ai/web-llm/lib/index.js:3624:7
    at file:///web-llm/examples/next-simple-chat/node_modules/@mlc-ai/web-llm/lib/index.js:3556:5
    at file:///web-llm/examples/next-simple-chat/node_modules/@mlc-ai/web-llm/lib/index.js:3557:3
    at file:///web-llm/examples/next-simple-chat/node_modules/@mlc-ai/web-llm/lib/index.js:3751:2
    at ModuleJob.run (node:internal/modules/esm/module_job:194:25) {

[narangkay]

Just to confirm, you're seeing that error when using the pre built binary from npm, and not when building from source, correct? if yes, it matches my error as well

[djaffer]

yes. Right. Building a source is not possible. If it is required, why not just upload the binaries in a seperate repo?

[narangkay]

To clarify a bit
Before #138 it was not possible to use this package with NextJS (by building from source or by using the package from npm).
After #138 it's now possible to build the project from source and then use it with NextJS, but for some reason the pre-built binary with npm is not working.

See instructions to build form source here: https://github.com/mlc-ai/web-llm#build-webllm-package-from-source

[narangkay]

Would be helpful if you could provide more information about why building from source did not work, and if the issue was with the next integration specifically or you were not able to build from source at all.

I have a working example here which works with next js, complete with a script to build from source on vercel.

https://github.com/narangkay/interactive-resume

[narangkay]

Also, I think if your problems are unrelated to the next integration and more about inability to build from source, you might want to create a new issue

[praveen-palanisamy]

With any Next.js project, the examples/next-simple-chat project, when the pre-built Web LLM package from the NPM package registry @mlc-ai/web-llm (as of v0.2.8) is installed and used directly, the following ReferenceError is raised:

ReferenceError: require is not defined in ES module scope, you can use import instead
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.

One way to fix the above ES Module and CommonJS syntax mixing is by leveraging Next.js's support for automatically transpiling dependencies from packages.

With Next.js v13.0.0+, adding the following to next.config.js is all that is needed:

/** @type {import('next').NextConfig} */
const nextConfig = {
  transpilePackages: ['@mlc-ai/web-llm'],
  ...
}
 
module.exports = nextConfig

So, we could update examples/next-simple-chat/next.config.js with the above line to get rid of the above ReferenceError.

But that results in the following compiler error:

- error ./node_modules/@mlc-ai/web-llm/lib/index.js
Module parse failed: Identifier 'Module' has already been declared (6895:20)
|             return async function() {
|                 let Module = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
>                 var Module = typeof Module != "undefined" ? Module : {};
|                 var readyPromiseResolve, readyPromiseReject;
|                 Module["ready"] = new Promise(function(resolve, reject) {

Import trace for requested module:
./node_modules/@mlc-ai/web-llm/lib/index.js
./src/utils/chat_component.tsx

Her's the diff of the pre-built mlc-ai/web-llm/lib/index.js (right-side) pushed to the NPM package registry and a fresh source-build (left-side):

The above error is likely because of the redefinition of Module in function EmccWASI().

The rollup.config.js and examples/next-simple-chat/next.config.js doesn't seem to be in sync to produce the same bundle/compiled output.

If the use of CommonJS cannot be avoided in the bundle, a solution to consider is to conditionally export CommonJS for require and ESM for import usages in other projects as dependencies.

[narangkay]

Hi @praveen-palanisamy, thank you so much for helping here - I did not have the NextJS expertise necessary to understand what was wrong.

I was able to follow along in your explanation until the following line:

The [rollup.config.js](https://github.com/mlc-ai/web-llm/tree/main/rollup.config.js) and [examples/next-simple-chat/next.config.js](https://github.com/mlc-ai/web-llm/tree/main/examples/next-simple-chat/next.config.js) doesn't seem to be in sync to produce the same bundle/compiled output.

I would love to fix this, since it seems like it would fix the root of the problem. Do you have any ideas on how we can sync the two?

[Forpee]

Is there any progress on this issue?