Glob-style Imports in .tsx Files Not Bundled Correctly

[vinsonchuong]

I have a function within a .tsx file that looks something like:

const components = new Map<string, ComponentType>();
function getComponent(type: string) {
  const Component =
    components.get(type) ??
    lazy(async () => {
      try {
        return await import(`./components/${type}.tsx`);
      } catch {
        return { default: () => null };
      }
    });
  components.set(type, Component);
  return Component;
}

When bundled, I see that the import is replaced by a call to globImport_..., but that variable is not defined anywhere in the bundle.

If I move the above function into a .js file, it works correctly.

[2767mr]

This also does not work for regular typescript files.
Playground link. Notice that adding --loader:.ts=js will cause it to work at the cost of type support.

As a workaround it is possible to put the import in a .js file and export a wrapper. Example

[Fuzzyma]

I have the exact same problem. I converted by js file to ts and the import stopped working. I assume it has something to do with esbuild not knowing if the import is a type import or an actual import (because it cant statically analyze it) when loading from a ts file (loading typescript files from a js file is fine because you cant ever import types into js)