middle-router: require is undefined for eventemitter3

[jimsimon]

Hello, I'm trying to use the following import:

import * as Router from 'middle-router';

But at runtime I get the following error:

Any idea why require would be undefined here?

Here's my tsconfig.json for reference in case it matters:

{
  "compilerOptions": {
    "declaration": true,
    "noImplicitAny": true,
    "removeComments": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "allowSyntheticDefaultImports": true,
    "allowJs": true,
    "esModuleInterop": true,
    "target": "ES2020",
    "sourceMap": true,
    "baseUrl": "./",
    "module": "ES2020",
    "moduleResolution": "Node",
  }
}

[evanw]

Is this problem related to esbuild? You haven't provided any information that indicates whether you are using esbuild or how you are using it.

[jimsimon]

Sorry for not being clear, I'm using esbuild via https://modern-web.dev/guides/dev-server/typescript-and-jsx/#esbuild

[evanw]

Ah ok, thanks for the info. This problem is not related to esbuild then. According to their documentation, esbuild is only used for TSX/JSX/JSON-to-JS but otherwise doesn't have any effect on your code.

The problem is that you are trying to use code that calls require() in the browser, and that doesn't work because require is a node-specific API that doesn't exist in the browser. Looks like there is documentation about how to use CommonJS modules with this software here: https://modern-web.dev/guides/going-buildless/es-modules/#commonjs-modules. If you are having additional problems you should ask for help from them.

Closing this issue since this problem is not related to esbuild.

[jimsimon]

Ah I noticed that the docs for esbuild say it supports CommonJS, is that only for output?

[evanw]

It’s for bundling (esbuild is primarily a bundler) but the tool you’re using isn’t using esbuild’s bundling feature.

[jimsimon]

Ah okay, thanks for the clarification!