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

[Brendonovich]

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] 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