error TS2835 suggests `.js` extension when `rewriteRelativeImportExtensions` is enabled

🔎 Search Terms

• error TS2835
• rewriteRelativeImportExtensions
• allowImportingTsExtensions
• tsconfig
• diagnostics

🕗 Version & Regression Information

• This changed between versions: N/A and 5.7.2
• This changed in commit or PR: N/A
• This is the behavior in every version I tried, and I reviewed the FAQ for entries about: rewriting extensions
• I was unable to test this on prior versions because: the feature didn't exist yet

⏯ Playground Link

Playground does not support multiple files to demonstrate the diagnostic

💻 Code

//@filename src/foo.ts

export const foo = "foo"

//@filename src/bar.ts

import { foo } from './foo'

And in tsconfig:

// compiler options
    "moduleResolution": "nodenext",
    "allowImportingTsExtensions": true,
    "rewriteRelativeImportExtensions": true,

Though here is my full tsconfig just in case:

{
  "compilerOptions": {
    // Enable latest features
    "lib": [
      "ESNext",
      "DOM"
    ],
    "target": "ESNext",
    "module": "NodeNext",
    "moduleDetection": "force",
    "jsx": "react-jsx",
    "allowJs": false,

    "moduleResolution": "nodenext",
    "allowImportingTsExtensions": true,
    "rewriteRelativeImportExtensions": true,
    "verbatimModuleSyntax": true,
    "noEmit": true,
    // Best practices
    "strict": true,
    "skipLibCheck": true,
    "noFallthroughCasesInSwitch": true,
    // Some stricter flags (disabled by default)
    "noUnusedLocals": false,
    "noUnusedParameters": false,
    "noPropertyAccessFromIndexSignature": false,
    // Awesome bundling
    "isolatedDeclarations": true,
    "composite": true
  }
}

🙁 Actual behavior

src/bar.ts:1:21 - error TS2835: Relative import paths need explicit file extensions in ECMAScript imports when '--moduleResolution' is 'node16' or 'nodenext'. Did you mean './foo.js'?

1 import { foo } from "./foo";

The diagnostic suggests a file extension ending in .js, even when both allowImportingTsExtensions and rewriteRelativeImportExtensions are enabled.

🙂 Expected behavior

src/bar.ts:1:21 - error TS2835: Relative import paths need explicit file extensions in ECMAScript imports when '--moduleResolution' is 'node16' or 'nodenext'. Did you mean './foo.ts'?

1 import { foo } from "./foo";

The suggested import path should probably be .ts when these options are enabled.

Assuming I had rewriteRelativeImportExtensions: false, and given my above settings which is not using bundler mode, it would make sense to suggest .js. However, because rewrite is enabled, I think the best option would be to suggest .ts.

It also seems like tsserver should be able to offer an intellisense fix here in general, but I'm not sure, and that's a bit unrelated.

Additional information about the issue

Additionally, the wiki faq seems slightly outdated now with the addition of rewriteRelativeImportExtensions. It currently says the following:

### Module Specifier Rewriting
It's explicitly out of scope for TypeScript to modify module specifiers as they appear in emitted JS, e.g [...]

[...] This includes things like changing file extensions

Comienza rastreando el diagnóstico TS2835 y cómo moduleResolution, allowImportingTsExtensions y rewriteRelativeImportExtensions afectan a la ruta sugerida. Reproduce el ejemplo de los dos archivos src/foo.ts y src/bar.ts con la tsconfig proporcionada y, después, verifica que el diagnóstico sugiera .ts cuando el reescrito esté habilitado, mientras que en caso contrario conserve la sugerencia existente de .js.