[Bug?]: unplugin-icons + unplugin-auto-import don't work within filesystem routes

[Brendonovich]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

Inside files in /routes that have a default export - ie those that export a route component - the imports that would usually be provided by unplugin-auto-import are (i assume) not present, so instead of rendering the icons there is an attempt to render undefined.
In files that don't export a default component this is apparently not an issue.

Expected behavior 🤔

The imports from unplugin-auto-import should always be present so that auto-imports can be used in route files.

Steps to reproduce 🕹

Steps:

1. Go to this StackBlitz
2. Notice that using the icon works in /app.tsx and /routes/SeparateFileComponent.tsx, but not /routes/index.tsx

Context 🔦

I want to have auto imported icons throughout my whole app.

Your environment 🌎

No response

[nksaraf]

Probably a vinxi (bundler issue)

[Brendonovich]

I think this is an unplugin-auto-import problem, it seems to not like that route file IDs have query params in them (eg app/pages/index.tsx?pick=default&pick=$css). I've made a small wrapper that removes the query params and auto import is working fine.

const VinxiAutoImport = (options) => {
  const autoimport = AutoImport(options);
  
  return {
    ...autoimport,
    transform(src, id) {
      if (id.startsWith("/")) {
        id = new URL(`file://${id}`).pathname;
      }
    
      return autoimport.transform(src, id);
    },
  };
};

[ryansolid]

What should we do here do you think? We use URLs to pick resources, should this issue be reported against unplugin-auto-import?

[Brendonovich]

I think so, vite plugins should probably be able to handle query params in module paths

[brenelz]

Did we ever create an issue on unplugin-auto-import?

[birkskyum]

Instead of the transform workaround mentinoed here, a simpler workaround now would be to use the include in the plugin config

AutoImport({
      include: [/\.[jt]sx?(\?|$)/], // <- the fix
      dirs: ["./src/auto"],         // your existing options, unchanged
      dts: "./src/auto-imports.d.ts",
    }),

NOTE: if you need .svelte, .vue etc, it has to be e.g.

include: [/\.[jt]sx?(\?|$)/, /\.vue$/, /\.vue\?vue/, /\.svelte$/, /\.astro$/]

@brenelz , I don't think a ticket was ever created

[birkskyum]

Fixed on main by #2249, for the same reason it fixed #1918.

Route files are imported through an id carrying the picked exports in the query, which left it ending in the export name rather than an extension:

src/routes/index.tsx?pick=default&pick=$css

unplugin-auto-import's default include filter is /\.[jt]sx?$/, anchored at end of string, so it never matched route files and skipped them. That is why the icon worked in app.tsx and SeparateFileComponent.tsx but not routes/index.tsx. The id now ends with a lang.<ext> marker (...&lang.tsx), the convention Vue SFCs use, so those filters match again.

Answering @brenelz: no upstream issue is needed. The ?pick= ids were ours, so this was ours to fix.

Verified against main with a stock AutoImport({ dirs: [...] }) and no include override. Before, the route chunk emitted a bare global; now the import is injected and SSR renders it, in both dev and production builds.

Note this is on main but not yet in an rc release, so it will land in the next one.