[Vue/Vite/Nuxt] Build Error: require is not defined in ES module scope, you can use import instead

[yunho-c]

Environment

• Nuxt project using vitesse-nuxt3 template
• Example repo in https://github.com/k2m5t2/tvm-bot-web
  • rough code (may result in other errors)

Problem

Using web-llm in a Nuxt project results in an import error during build.

This seems to relate to ES module / CommonJS import conflicts.

 ERROR  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 '/Users/yunhocho/Documents/GitHub/tvm-bot-web/frontend/node_modules/.pnpm/@[email protected]/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 file is being treated as an ES module because it has a '.js' file extension and 'node_modules/.pnpm/@[email protected]/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 <anonymous> (node_modules/.pnpm/@[email protected]/node_modules/@mlc-ai/web-llm/node_modules/@mlc-ai/web-tokenizers/lib/index.js:66:73)
  at <anonymous> (node_modules/.pnpm/@[email protected]/node_modules/@mlc-ai/web-llm/node_modules/@mlc-ai/web-tokenizers/lib/index.js:78:4)
  at <anonymous> (node_modules/.pnpm/@[email protected]/node_modules/@mlc-ai/web-llm/node_modules/@mlc-ai/web-tokenizers/lib/index.js:2:66)
  at <anonymous> (node_modules/.pnpm/@[email protected]/node_modules/@mlc-ai/web-llm/node_modules/@mlc-ai/web-tokenizers/lib/index.js:5:2)
  at <anonymous> (node_modules/.pnpm/@[email protected]/node_modules/@mlc-ai/web-llm/node_modules/@mlc-ai/web-tokenizers/lib/index.js:204:1)
  at ModuleJob.run (node:internal/modules/esm/module_job:218:25)
  at async ModuleLoader.import (node:internal/modules/esm/loader:323:24)
  at async ViteNodeRunner.interopedImport (node_modules/.pnpm/[email protected]/node_modules/vite-node/dist/client.mjs:383:28)
  at async ViteNodeRunner.directRequest (node_modules/.pnpm/[email protected]/node_modules/vite-node/dist/client.mjs:253:24)
  at async ViteNodeRunner.cachedRequest (node_modules/.pnpm/[email protected]/node_modules/vite-node/dist/client.mjs:189:14)

(Temporary) Solution

In nuxt.config.ts, add the build transpile option:

export default defineNuxtConfig({
+   build: {
+     transpile: ['@mlc-ai/web-llm'], // required in order to build successfully
+  },
...

and change import statements like the following:

- import { ChatInterface, ChatModule, ChatRestModule, ChatWorkerClient, AppConfig } from "@mlc-ai/web-llm";
+ import * as webllm from '@mlc-ai/web-llm'

- chat.value = new ChatModule(); // example usage
+ const chat = new webllm.ChatModule() // example usage

However, this does seem to be an abnormal behavior that still needs to be resolved.

Related Issues

#140

Notes

I don't have expertise in JavaScript/Vue/Nuxt to fully understand what is going on, so please add any other helpful notes!

Feel free to close this, or keep until the error doesn't occur by default

[wingstako]

Same error on my SvelteKit + Vite project

[kikohs]

Having a langchain integration would be fantastic for web-llm. Bumping the issue.

[wingstako]

Same error on my SvelteKit + Vite project

It works after disabling SSR

[CharlieFRuan]

This error should be addressed in npm 0.2.36. For details please see https://github.com/mlc-ai/web-llm/pull/397.