next-simple chat - ReferenceError: require is not defined in ES module scope, you can use import instead

[michellekaplan7]

Error when running npm run dev of:

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 '/Users/michellekaplan/Desktop/practice/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.

[DiegoCao]

Looking into this!

[michellekaplan7]

Thank you @DiegoCao! Are you able to replicate this problem? Thanks for your help!

[DiegoCao]

I've replicated the problem, will try to fix it

[michellekaplan7]

I've replicated the problem, will try to fix it

@DiegoCao - Any updates on this? Thanks!

[ryanatkn]

I was able to work around this by disabling SSR. For SvelteKit this meant adding export const ssr = false; to src/routes/+layout.ts.

[Neet-Nestor]

I've met the same problem. This issues need to be further investigated.

[tqchen]

make a high-level remark here. The emscripten generate module have some conditional blocks for nodejs (this is default behavior of emscripten) and it does not work well with some of the bundlers.

if (NODE_JS) {
   require(nxxxx)
} else {
   this is what is useful in ES
}

One way to address this is to write a python script that remove the block in if (NODE_JS), which should be fine as long as we are not running in nodejs.

if (NODE_JS) {. 
    throw Error("This module does not yet work on nodejs env")
} else {
   job as usual
}

[louis030195]

i just changed the next.config.js, problem solved:

/** @type {import('next').NextConfig} */
const nextConfig = {
    reactStrictMode: true,


    webpack: (config, { isServer }) => {
        // Fixes npm packages that depend on `fs` module
        if (!isServer) {
            config.resolve.fallback = {
                ...config.resolve.fallback, // if you miss it, all the other options in fallback, specified
                // by next.js will be dropped. Doesn't make much sense, but how it is
                fs: false, // the solution
                module: false,
                perf_hooks: false,
            };
        }

        return config
    },
};

export default nextConfig;

[Neet-Nestor]

i just changed the next.config.js, problem solved:

/** @type {import('next').NextConfig} */
const nextConfig = {
    reactStrictMode: true,


    webpack: (config, { isServer }) => {
        // Fixes npm packages that depend on `fs` module
        if (!isServer) {
            config.resolve.fallback = {
                ...config.resolve.fallback, // if you miss it, all the other options in fallback, specified
                // by next.js will be dropped. Doesn't make much sense, but how it is
                fs: false, // the solution
                module: false,
                perf_hooks: false,
            };
        }

        return config
    },
};

export default nextConfig;

This still doesn't work for me. In my case the export will throw error on npm run dev.

(node:43180) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
(Use `node --trace-warnings ...` to show where the warning was created)
/Users/neet/code/web-llm/examples/next-simple-chat/next.config.js:22
export default nextConfig;
^^^^^^

SyntaxError: Unexpected token 'export'
    at wrapSafe (node:internal/modules/cjs/loader:1389:18)
    at Module._compile (node:internal/modules/cjs/loader:1425:20)
    at Module._extensions..js (node:internal/modules/cjs/loader:1564:10)
    at Module.load (node:internal/modules/cjs/loader:1287:32)
    at Module._load (node:internal/modules/cjs/loader:1103:12)
    at cjsLoader (node:internal/modules/esm/translators:318:15)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:258:7)
    at ModuleJob.run (node:internal/modules/esm/module_job:262:25)
    at async ModuleLoader.import (node:internal/modules/esm/loader:474:24)
    at async loadConfig (/Users/neet/code/web-llm/examples/next-simple-chat/node_modules/next/dist/server/config.js:678:36)

And even if I add "type": "module" to package.json, the following error will still occur:

 ⨯ 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 '/Users/neet/code/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:///Users/neet/code/web-llm/examples/next-simple-chat/node_modules/@mlc-ai/web-llm/lib/index.js:4855:74
    at file:///Users/neet/code/web-llm/examples/next-simple-chat/node_modules/@mlc-ai/web-llm/lib/index.js:4867:5
    at file:///Users/neet/code/web-llm/examples/next-simple-chat/node_modules/@mlc-ai/web-llm/lib/index.js:4794:3
    at file:///Users/neet/code/web-llm/examples/next-simple-chat/node_modules/@mlc-ai/web-llm/lib/index.js:4795:3
    at file:///Users/neet/code/web-llm/examples/next-simple-chat/node_modules/@mlc-ai/web-llm/lib/index.js:5013:2
    at ModuleJob.run (node:internal/modules/esm/module_job:262:25)
    at async ModuleLoader.import (node:internal/modules/esm/loader:474:24) {
  page: '/'
}

I believe this is a bundler issue, but somehow this issue only happens to this example but not my another Next.js project. Very weird.

[CharlieFRuan]

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

[CharlieFRuan]

Closing this issue as completed; feel free to open new ones if problems persist