// foo.ts
const foo = 'foo';
export default foo;
// bar.ts
const bar = 'bar'
export { bar as default };
The foo module is able to be auto-imported, but the bar module is not in the options.
Is this intended or a miss?
Expect both foo and bar module to be auto-imported when typing foo and bar.
2
Answers
The difference in auto-import behavior between the foo and bar modules is due to the way they are exported. Let’s break it down:
In foo.ts, you are exporting the variable foo as the default export using the export default syntax. This allows the foo module to be auto-imported when typing foo because it is the default export.
In bar.ts, you are exporting the variable bar using the named export syntax export { bar as default }. This syntax explicitly names the exported variable default. However, when auto-importing, the auto-import mechanism usually assumes that the default export is the one to be imported when only the module name is typed. Since the named export is explicitly named default, the auto-import mechanism may not recognize it as the desired import when you type bar.
The fix for the issue has been made in this Pull Request: Fix export as default not auto importing #54871. The fix will probably be available in the next TypeScript release (5.2?)
Nicely, this was raised as an issue ticket by the asker of this question, which I found by googling
site:github.com issues javascript OR typescript auto import export "as default": Auto Import for export as default is not working #54839 (I was searching for existing ones before possibly raising one of my own).