Automatic typescript imports in VSCode are a life-saver and like all good things it hurts when they go away.

I keep seeing this problem in new projects where the automatic imports mostly work fine… except for new files 😡.

Here’s the infuriating workflow:

1. Add new file
2. Type const MyComponent: FC. Get a prompt to import FC from react. Do it.
3. Add the rest of the line: const MyComponent: FC = () => <ExistingComponent />
4. No auto import for ExistingComponent 😢
5. Manually add the import
6. Now future auto imports work fine

In fact, if you manually import any component (excluding those from node_modules) then auto-import will start working for new components.

import { IrrelevantComponent } from './SomewhereElse';

const MyComponent: FC = () => <ExistingComponent />; // <-- now prompted for auto import

The Fix

As ever with these kinds of things, the fix is a tiny change: update your tsconfig.json to include files with a glob istead of root folder.

{
- "include": ["src"]
+ "include": ["src/**/*"]
}

You’re welcome, future-me.