[Vue/Vite/Nuxt] Build Error: require is not defined in ES module scope, you can use import instead #353
Description
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 usageHowever, this does seem to be an abnormal behavior that still needs to be resolved.
Related Issues
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