"importModuleSpecifierEnding" not added on "Move to new file" refactoring

[jaens]

Bug Report

🔎 Search Terms

.js extension missing; ECMAScript modules; ESNext

🕗 Version & Regression Information

• This is the behavior in every version I tried

⏯ Playground Link

Not possible, needs refactoring functionality.

💻 Code

Open TypeScript project in VSCode with the following in settings.json:

{ "typescript.preferences.importModuleSpecifierEnding": "js" }

tsconfig.json:

{
    "compilerOptions": {
        "module": "ESNext"
    }
}

Create a file main.ts:

function foo() { }
function bar() { foo(); }

Execute "Move to new file" refactoring on the foo function.

🙁 Actual behavior

The following import is generated:

import { foo } from "./foo";

🙂 Expected behavior

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

[jaens]

Also, I'm not sure why importModuleSpecifierEnding is only supported in the VSCode settings?
Seems like something that should be in tsconfig.json, or even automatic (based on other settings), considering that AFAIK it's always needed when using new-style ES modules in Node.js.

[andrewbranch]

It is automatically applied in node12 and nodenext module resolution modes.

[jaens]

It is automatically applied in node12 and nodenext module resolution modes.

I assume this means "module": "ESNext" with "moduleResolution": "node"?

Indeed, for auto-imports that seems to automatically add a .js ending without needing importModuleSpecifierEnding - though this fact seems somewhat undocumented, none of the ESM examples in the docs even contain a .js extension in the imports, so when the refactoring did not work, I thought I had to add importModuleSpecifierEnding.

[andrewbranch]

I assume this means "module": "ESNext" with "moduleResolution": "node"?

No, I mean "moduleResolution": "node12" and "moduleResolution": "nodenext".

[jaens]

No, I mean "moduleResolution": "node12" and "moduleResolution": "nodenext".

Ah, OK, I did not think that was an option since it's not valid according to the tsconfig schema:

It is mentioned in the docs.

Though trying that out on 4.5.0-dev.20211013 seems to break loading type declarations for eg. rxjs, so I couldn't use it anyway... (works perfectly with moduleResolution: "node" with ES modules)

error TS7016: Could not find a declaration file for module 'rxjs'. '/home/.../node_modules/.pnpm/[email protected]/node_modules/rxjs/dist/cjs/index.js' implicitly has an 'any' type.
  Try `npm i --save-dev @types/rxjs` if it exists or add a new declaration (.d.ts) file containing `declare module 'rxjs';`

3 import { Subject } from "rxjs";
                          ~~~~~~

[andrewbranch]

Yeah, rxjs will either need to update or we’ll need to decide to do something about it per #46281.