Why Vscode Cannot Autoimport Text

import { Image } from '@mantine/core'; import { Layout } from '@/layout'; import textComponentImage from '../../images/vscode-text-component.png'; import textConstructorImage from '../../images/vscode-text-constructor.png';

export const meta = { title: 'Why can VSCode not autoimport the Text component?', description: 'It is confused by the native Text constructor', slug: 'why-vscode-cannot-autoimport-text', category: 'tooling', tags: ['vscode', 'autoimport'], created_at: 'July 15, 2024', last_updated_at: 'July 15, 2024', };

export default Layout(meta);

Why is the Text component not automatically imported?

VSCode cannot automatically import the Text component because it confuses it with the native Text constructor, which always appears as the first type reference in the editor.

<Image src={textConstructorImage.src} maw={800} />

How can I import the Text component with VSCode?

To import the Mantine Text component, you need to manually select it from the list of suggestions (usually, it appears as the second option):

<Image src={textComponentImage.src} maw={800} />

To learn more about VSCode IntelliSense and autoimport, visit the official documentation.