delucis/astro-auto-import

Auto-import components in Astro projects

Hi, I’m Chris (he/him) 👋

astro-auto-import's Issues

Support for Astro v2

Currently getting peer conflicts when building using Astro v2.0.0-beta.2 due to ^1.0.0 peer dependency.

Does not work with Astro v3.3.3 and Starlight v0.11.1

With this plugin configured on Astro v2.7.0 and Starlight v.5.6, everything worked. When I updated Astro and Starlight, without any config changes, the plugin stopped working.

Usage with Starlight

Is it possible to use this package with Starlight? I was reading through Astro's Discord where people were recommending this but I could not make this work.

Here is a link to a basic repro: https://stackblitz.com/edit/github-rbo2vn?file=src%2Fcontent%2Fdocs%2Fguides%2Fexample.mdx

Any help is appreciated! Thanks for the great package!

Import and Export for overriding MDX HTML defaults

Kizu wrote this https://blog.kizu.dev/astro-mdx-components/ and I recommend he take a look at your integration to simplify things, however the part I think your integration doesn't handle when it comes to overriding default HTML elements in MDX is the export step.

I was wondering whether it would be simple to extend functionality to AutoImport to both import and re-export components for MDX and this way it would possible to provide overrides for HTML elements like <a> and <h1> etc.

TypeScript check failed

Cannot find the astro component.

Adding MDOC

It would be nice to work with MDOC files too.
In this case we can use Keystatic CMS admin and easy global import of components.

astro-auto-import stoped working after astro update to 2.5

When runing the "astro build" command, i get the following error message in the console

[astro:jsx] /path/to/project/src/pages/page-quizz.mdx: Could not render `Quiz`. No matching import has been found for `Quiz`.

It used to work under Astro 2.1
If i import manually the "Quizz" component, i don't get the error...

Console warning about MDX initialization sequence when used with Starlight

What's happening?

When using AutoImport and Starlight, AutoImport must be placed after the Starlight integration in order to function properly. However, the package throws a warning in the console:

[auto-import] ⚠️ @astrojs/mdx initialized BEFORE astro-auto-import.
Auto imports in .mdx files won’t work!
Move the MDX integration after auto-import in your integrations array in astro.config.

Starlight initializes MDX automatically, and auto-importing seems to work fine when placed afterwards.

Minimal reproduction

https://stackblitz.com/edit/github-jqmc1e?file=astro.config.mjs

(Thanks Chris!)

Import entire directory as namespace

I’d love to be able to point this at an entire directory or subdirectory and have all the components in that directory be namespaced, so something like this:

imports: [
  {
    './src/components/atoms/*': ‘Atoms',
  },
];

and then use them like <Atoms.MyAtom />

Basically an expansion of the current Namespace Import to support a directory of components instead of a single file with multiple modules.

Possibility to use single index file (barrel file) w/o repeating/duplicating component names

In my project I have a single index.ts file that just imports all of my separate components and then re-exports them as named exports (barrel file).

import ComponentA from "@components/ComponentA";
import ComponentB from "@components/ComponentB";


export {
  ComponentA,
  ComponentB
};

This way, I used to be able to use all my components through a single import statements (possibly with a TS alias), like this:

import { ComponentA, ComponentB } from "@components"

Now I want to use astro-auto-import, and I was wondering if there is any way to auto-import all the files that get exported from my index file, without repeating/duplicating all the module names, and without prefixing them with a namespace.

I'd love to have a single source of truth for all the usable components, and I'd love it to be my index file rather than the Astro config.

Import globs?

It would be great to be able to import using globs like so:

AutoImport({
  imports: [
    // '@components/Form.astro',
    // '@components/Radio.astro',
    '@components/*',
    // '@includes/Intro.md,
    // '@includes/About.astro',
    '@includes/*'
  ],
})

And still use the same way:

<Form>
  <Radio/>
</Form>

I attempted to create something using Vite's glob-import but couldn't get it work :/

astro-auto-import not working

The package seems to be non-functional at the moment. The error I am getting makes me think the package is going to the base project folder, then taking into account any ../ in the file path, then removing all the slashes. So it's trying to access a non-existent folder structure.

Basic repo with issue shown is here https://github.com/Boston343/astro-auto-import-test

For this repo, the mdx file in question is using-mdx.mdx which is the example file from astros blog starter. I removed the include that was in the file, and instead am using the AutoImport to try and add the component import into the mdx file. This throws errors.

astro.config.mjs

import { defineConfig } from "astro/config";
import mdx from "@astrojs/mdx";
import AutoImport from "astro-auto-import";

import sitemap from "@astrojs/sitemap";

// https://astro.build/config
export default defineConfig({
  site: "https://example.com",
  integrations: [
    AutoImport({
      imports: ["../../components/HeaderLink.astro"],
    }),
    mdx(),
    sitemap(),
  ],
});

The error looks like:

 Cannot find module 'filePathToRepoWithoutSlashesastro-auto-import-testsrccomponentsHeaderLink.astro' imported from 'file/Path/To/Repo/With/Slashes/astro-auto-import-test/src/content/blog/using-mdx.mdx'
  File:
    file/Path/To/Repo/With/Slashes/astro-auto-import-test/src/content/blog/using-mdx.mdx?astroPropagatedAssets=true

Only inject imports for components actually used in MDX

Currently if I use astro-embed-integration in astro.config.mjs it will inject itself (CSS and JS) post compiling to every MDX file, even if there aren't any embeds in the MDX.
I propose to check for every file which would got embeds and inject proper astro-embed plugin for each of them