Glob imports with alias don't preserve the pattern

[lsdsjy]

Describe the bug

With a vite config like this:

export default {
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
    },
  },
};

And using eager glob import like this:

const jsons = import.meta.glob('@/jsons/*.json', { eager: true });
const json = jsons[`@/jsons/1.json`]; // <- undefined

I expect to get the imported JSON module but instead got undefined. It turns out that the result of glob import is like this:

The alias in the pattern is resolved with absolute path so I cannot access the result using the same pattern(i.e. @/jsons/xxx).

(A temporary workaround would be using relative path instead of alias in the glob import pattern, which is however some kind of limitation.)

Reproduction

https://stackblitz.com/edit/vitejs-vite-e49pbe?file=vite.config.js

Steps to reproduce

No response

System Info

Binaries:
    Node: 16.14.2 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 7.17.0 - /usr/local/bin/npm
  npmPackages:
    vite: ^4.1.4 => 4.1.4

Used Package Manager

npm

Logs

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[patak-dev]

@lsdsjy would you explain more about your use case? Why are you accessing the jsons object by id? Could you iterate over the result instead?

[lsdsjy]

I'm migrating a Webpack-based project where the original case is like this:

require(`@/images/tab/${tabIndex}.png`)

Ideally it should be equivalent to this in Vite:

import.meta.glob('@/images/tab/*.png', { eager: true })[`@/images/tab/${tabIndex}.png`]

Iterating works but is awkward, like:

const imgs = import.meta.glob('@/images/tab/*.png', { eager: true })
Object.entries(imgs).find(([path, ]) => path.endsWith(`/${tabIndex}.png`))[1]

[sapphi-red]

It seems the current behavior is causing a bug with new URL(`@/${img}.svg`, import.meta.url) (#10597).

[EricMCornelius]

I would mention that the output generated glob chunks can wind up being truly massive when uncompressed due to long repeated key prefixes - which is a potential performance concern.

Running into a similar issue right now with large icon sets causing multiple megabyte chunks just for the dynamic key lookup mappings - and they're about 80% smaller if we can shorten the key prefix.

[Rich-Harris]

A case I just hit:

const content = import.meta.glob(`$lib/content/**/*.md`, {
  eager: true,
  query: '?url'
});

for (const path in content) {
  // I expected this to work, but it doesn't
  const [category, slug] = path.slice('$lib/content/'.length, -'.md'.length).split('/');

  // ...more logic...
}

It's workaroundable, but it definitely feels like a bug!

[vicentematus]

Hit the same case yesterday, I was tired of dealing with relative paths (lots of ../../../) , tried using aliases and it returned nothing. Specs: vite@5.0.3 and node@20.11.1