microsoft / microsoft/TypeScript
`verbatimModuleSyntax` leaves empty curly brackets in the JS output
- 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
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