How to load component once in astro mdx (auto import)

When using MDX file in Astro JS you probably need a custom component. What if you can load the component once and use it at all astro mdx files without importing it? a.k.a auto import!

Thanks to @delucis! for creating astro-auto-import package

How to install astro auto import

Install

npm i astro-auto-import // for NPM
yarn add astro-auto-import // for yarn

Usage

• import the integration at astro.config file
• make sure AutoImport comes first, before mdx()
• You can import astro or tsx files

Sample

import AutoImport from 'astro-auto-import';

// https://astro.build/config
export default defineConfig({
  site: 'https://onebite.dev',
  integrations: [
    AutoImport({
      imports :[
        './src/components/Alert.astro',
        './src/components/Codepen.astro'
      ]
    }),
    mdx()
  ]
});

That’s it!

Now you can use component in your contents / collection mdx files, without importing it first.