TSX Files and "nodenext" module resolution

[monsonjeremy]

I ran into this today while configuring my project. Because the latest version of Ink requires ESM we have to add "moduleResolution": "nodenext" to our tsconfig.json. That's all fine with me, but the problem is that this requires us to use file extensions when importing relative local files (eg import X from './x.tsx'). However Typescript won't let us use the allowImportingTsExtensions: true during the build phase:

This flag is only allowed when --noEmit or --emitDeclarationOnly is enabled, since these import paths would not be resolvable at runtime in JavaScript output files. The expectation here is that your resolver (e.g. your bundler, a runtime, or some other tool) is going to make these imports between .ts files work.

Is there a good way to fix this besides doing the below, which is to us .js as the extension, despite the file actually being a .tsx file?

For example:

import React from 'react';
import {render} from 'ink';
import App from './app.js';

[sindresorhus]

This would be a good question for the TypeScript issue tracker. This has nothing specifically to do with Ink.

[monsonjeremy]

@sindresorhus I assume that means you're aware that this is required and it's a flaw in the feature from Typescript? The reason I asked here was because there was a decision in ink to use ESM so I would assume this was considered or someone was aware of this being a problem?

[sindresorhus]

It is a known problem in TypeScript, yes.