Auto-imports
autoImports: boolean | string;
Add imports for known JSX components in MDX files automatically.
- default:
false
, no components are imported automatically true
, to enable automatic imports from files with name_autoimports.ts
<name>
, to find automatic imports in files named<name>
Now create an auto-import file exporting known components:
import { Code } from 'astro/components';
export const autoimports = {
Code,
};
Despite the suffix of the default value, these files should be simple ESM files (i.e. ES >=6) and not use any none-ES TypeScript features, because we need to parse them using
acorn
In your MDX file you can now use <Code ... />
without importing it:
# My Title
Here I am embedding some fancy code from the frontmatter:
<Code code={frontmatter.rawmdx} />
You can structure your export pretty much as you like, as long as the variable initialization is an object expression without spread operator. Files are evaluated up the directory tree, i.e. files closer to the MDX file take precedence over files further up the tree.
The variables inside a file are evaluated in order of appearance, i.e. the following export would yield the component FuzzyBear over FozzieBear for the use in <Bear />
, although b
is the default export:
import { FuzzyBear } from '@components/FuzzyBear';
import { FozzieBear } from '@components/FozzieBear';
export const a = {
Bear: FuzzyBear,
};
const b = {
Bear: FozzieBear,
};
export default b;
Auto-imports have one sub-option
autoImportsFailUnresolved: boolean;
Fail if unresolved components cannot be resolved by autoImports.
- default:
false
true
to throw an error on unresolved components