Glob Import & Dynamic Import

As you probably know, Qwik takes care of lazy-loading for you in order to make your app performant and scalable by default.

As a consequence of this automatic optimization, you don't need to and shouldn't use vite's dynamic imports feature as it conflicts with the optimizer.

But there are still some cases where you may need to import a lot of files from a directory and you may not want to type out all the file paths. For that kind of situation, you can use import.meta.glob.

import.meta.glob

The goal of using import.meta.glob is to allow you to create a wrapper component to which you can pass a name prop to chose which component you want to import:

<MetaGlobComponent name="file-name" />
<MetaGlobComponent name="another-file-name" />
<MetaGlobComponent name="etc." />

As written in the Vite documentation, import.meta.glob comes with a few features that allow you to specify how to import your files.

By default you can simply use pattern matching to specify which files should be imported from which folder:

const metaGlobComponents: any = import.meta.glob('/src/components/*');

But you can also pass in additional options like import, as, or eager:

const metaGlobComponents: any = import.meta.glob('/src/components/*', {
  import: 'default',
  as: 'raw',
  eager: true, // defaults to false
});

Do not use eager: true when importing Qwik components. This makes Vite combine multiple Qwik outputs together in a way that breaks Qwik.

Since Qwik doesn't support Promises as components, that means you need to await their import. To do so, you can simply throw the promise and make sure the result is stored somewhere. Qwik will catch the promise and wait for it to resolve before rendering the component again.

If you're using inline components or anything else, you can use eager: true, and the resulting object can be used as a normal object, keyed by the file path.

Example

import { component$, type Component } from '@qwik.dev/core';
 
const metaGlobComponents = import.meta.glob<Component>(
  '/src/routes/demo/cookbook/glob-import/examples/*',
  { import: 'default' }
);
 
export default component$(() => {
  return (
    <div>
      <MetaGlobExample name="example1" />
      <MetaGlobExample name="example2" />
      <MetaGlobExample name="example3" />
    </div>
  );
});
 
const loaded: Record<string, Component> = {};
export const MetaGlobExample = component$<{ name: string }>(({ name }) => {
  const Cmp = loaded[name];
  if (!Cmp) {
    const componentPath = `/src/routes/demo/cookbook/glob-import/examples/${name}.tsx`;
    const promise = metaGlobComponents[componentPath]();
    throw promise.then((c) => (loaded[name] = c));
  }
 
  return <Cmp />;
});