[TypeScript] Unknown file extension ".ts"

I have issues running express-openapi in a basic TypeScript project run through ts-node this way: node -r ts-node/register, this happens when the framework is trying to import my paths .ts files on this line: https://github.com/kogosoftwarellc/open-api/blob/9e8204657c656410aeafff9249834f66af6f97c3/packages/openapi-framework/index.ts#L238

TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".ts"

Worth mentioning, I am ~using~ trying to use OpenAPI 3.0.2 (a lot of issues with the current JSON schema used here but this is another topic) and run Node 16.

I have made a CodeSandbox reproducing this issue:

Step to reproduce:

1. Go to ~https://codesandbox.io/s/express-openapi-typescript-4w91hl~

   _EDIT: New sandbox with less noise and auto-reload for easier debug (you can skip step 2.): https://codesandbox.io/s/express-openapi-ts-node-we8kqn_

2. ~Restart Server (Left Menu: Server Control Panel > Control Container > Restart Server)~
3. Read the output in the default terminal

And even while trying to workaround while building for production, I cannot access any endpoint nor api-docs:

Step to reproduce:

1. Go to https://codesandbox.io/s/express-openapi-typescript-4w91hl
2. Start new Terminal with the “+” button
3. Run npm run build (or npm run build:watch if you want to play around)
4. Start new Terminal
5. Run npm run start:prod
6. Use the browser to navigate to:
   • / => OK - {"foo": "bar"} (Express parent App is working)
   • /api/healthcheck => OK - 200 (Express Router is working)
   • /api/api-docs => KO (/api-docs is not served)
   • /api/test => OK - {"path": "test"} (Express child App is working)
   • /api/users/xyz => KO (/users/{id} is not served)

---

Can someone help me figure out what I should do to make this work? 🙏 Or maybe someone has a current working example of TypeScript project using this lib?

Thanks in advance for your insights!

[cspotcode]

This seems to be the problem:

this happens when the framework is trying to import my paths .ts files on this line:

const imported = await import(`file://${fsRoutesItem.path}`); 

The framework uses import() and gives it a path to a TS file, sorta like this: import('./path/to/ts/file.ts')

Even when the file being loaded is a CommonJS file, import() goes through node’s internal ESM codepaths. Those codepaths can load CJS files, so it’s not changing the interpretation of your code from CJS to ESM. That is not the problem: your code is still CJS.

However, node’s ESM codepaths do not understand new file extensions. The only way to teach it about new file extensions, is to use ts-node’s ESM loader. That is the only way to plug into node’s internal ESM stuff.

This requires us to pass the --loader CLI flag to node, which means spawning a subprocess. Node’s loaders API is also marked experimental (you can read about the definition of “experimental” in node’s documentation)

For these reasons, we do not force projects to use an experimental API; you have to opt-in. ts-node-esm will opt-in. It’s an alias for ts-node --esm, and you can also specify "esm": true in your tsconfig.

[cspotcode]

Excellent, happy to help. My time is limited so if you have any future questions, I recommend asking on the TypeScript Community Discord server. The server has a great help system with plenty of experts willing to offer advice.