jpkleemans/vite-svg-loader

import.meta.globEager not working

Closed this issue · 9 comments

lisonge commented 
// vite.config.ts
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import svgLoader from 'vite-svg-loader';
import legacy from '@vitejs/plugin-legacy';
import hmrFollow from 'vite-plugin-hmr-follow';
import path from 'path';
export default defineConfig({
  plugins: [
    vue(),
    svgLoader(),
    legacy({
      targets: ['defaults', 'not IE 11'],
    }),
    hmrFollow(),
  ],
  server: {
    host: '127.0.0.1',
    port: 8001,
  },
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'),
    },
  },
  build: {
    sourcemap: false,
  },
});

// --------------------------------------
// any_file.ts

const modules = import.meta.globEager('@/assets/svg/*.svg', { as: 'url' });
  for (const path in modules) {
    const mod = modules[path];
    console.log(path, mod);
    // got <string>, <object>, instead of <string>, <string>
  }
lisonge commented

how to make import.meta.globEager work with vite-svg-loader ?

jpkleemans commented

import.meta.globEager should work just fine with vite-svg-loader. Can you reproduce the problem in a CodeSandbox?

lisonge commented

i expect import.meta.globEager('@/assets/svg/*.svg', { as: 'url' }) is Record<string, string>, but i got Record<string, Module>

lisonge commented

https://github.com/lisonge/svg-loader-test.git

pnpm i
pnpm run serve

will got

image

jpkleemans commented

Thanks for your reply and demo. I see now indeed that loading as url doesn't work. I'll have to dig in to the Import Reflection syntax of import.meta.globEager to see how to make it work. If you'd like to help by opening a PR, that is of course also very welcome!

abigmiu commented

vite3 以上是 import.meta.glob('source', { eager: true })。 用 ts 的时候会提示 globEage 已经废弃了