microsoft / microsoft/TypeScript

`verbatimModuleSyntax` leaves empty curly brackets in the JS output

Open
#62,239 1 comment 0 reactions 0 assignees View on GitHub
Domain: ES Modules Help Wanted Possible Improvement
Dominant language
Go
Stars
111k
Forks
14.3k
Avg merge
2d 4h
Merged PRs (30d)
132

Description

### 🔎 Search Terms

"verbatimModuleSyntax", "curly brackets", "empty brackets"

### 🕗 Version & Regression Information

- This is the behavior in every 5.x version I tried, and I reviewed the FAQ for entries about `verbatimModuleSyntax`

### ⏯ Playground Link

https://www.typescriptlang.org/play/?jsx=4&verbatimModuleSyntax=true&ts=5.9.2#code/JYWwDg9gTgLgBASRAQwOYFMA0cDeMCeY6iKGAClBGAM4C+cAZpSHAEQB26AHjAPShp0AOgBW1VgG4AUFO6RYcACboGyAK4AbeAzXsAxjGAR2JQQHUoyMESgAKMJRoAuU+UfUAlLilxfcKOgwalAmADxIgrhC0Q5UdLwAfFK0UkA

### 💻 Code

```tsx
import Image, {type ImageProps} from "next/image.js";

export default function ImageWrapper(props: ImageProps) {
return
}
```

### 🙁 Actual behavior

TS produces the following JS output when `verbatimModuleSyntax` is set to `true`:

```js
import { jsx as _jsx } from "react/jsx-runtime";
import Image, {} from "next/image.js";
export default function ImageWrapper(props) {
return _jsx(Image, Object.assign({}, props));
}
```

Notice the empty curly brackets in the import statement that were left off after removing type-only named imports.

### 🙂 Expected behavior

The empty curly brackets are unnecessary in this case. It is precisely the output TS produces when `verbatimModuleSyntax` is not enabled:

```js
import { jsx as _jsx } from "react/jsx-runtime";
import Image from "next/image.js";
export default function ImageWrapper(props) {
return _jsx(Image, Object.assign({}, props));
}
```

https://www.typescriptlang.org/play/?jsx=4&verbatimModuleSyntax=false&ts=5.9.2#code/JYWwDg9gTgLgBASRAQwOYFMA0cDeMCeY6iKGAClBGAM4C+cAZpSHAEQB26AHjAPShp0AOgBW1VgG4AUFO6RYcACboGyAK4AbeAzXsAxjGAR2JQQHUoyMESgAKMJRoAuU+UfUAlLilxfcKOgwalAmADxIgrhC0Q5UdLwAfFK0UkA

### Additional information about the issue

_No response_

Contributor guide

Open the contributing guide

Research direction

Start with the linked TypeScript Playground reproduction using verbatimModuleSyntax and the TSX import shown in the issue. Compare the generated output with and without the option; done means type-only named imports are removed without leaving empty curly brackets in the JavaScript import.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
compilers
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.