Error: Can't resolve '@glint/template' in '/path/to/component/file'

[barryofguilder]

I generated a new addon using this blueprint today. When I'm adding the signature for one of my components and use the WithBoundArgs or ComponentLike types from "@glint/template", I get an error when running the test-app.

My component in the addon:

import Component from '@glimmer/component';
import { type WithBoundArgs } from '@glint/template';
import UiComboboxOption from './ui-combobox/option.ts';

export interface UiComboboxSignature {
  Element: HTMLDivElement;
  Args: {
    value?: any | null;
    onChange?: (value: any | null) => void;
  };
  Blocks: {
    default: [
      {
        Option: WithBoundArgs<
          typeof UiComboboxOption,
          'option'
        >;
      },
    ];
  };
}

Error message:

[test-app] ERROR in ../ui-components/dist/components/ui-combobox.js 1:57-81
[test-app] Module not found: Error: Can't resolve '@glint/template' in '/Users/jbarry/Development/ui-components/ui-components/dist/components/ui-combobox'
[test-app]  @ ../../../../../private/var/folders/8l/_bprpr6s2pqgds0c88bn2wc40000gn/T/broccoli-22555t5EIX28K8nq6/cache-488-webpack_bundler_ember_auto_import_webpack/app.cjs 44:172-237

This error will happen with a gts or a ts file. Is there something I'm missing

[NullVoxPopuli]

Try

import type { WithBoundArgs } from '@glint/template';

we can't recommend import { type ... } for type-only imports because we cannot be guaranteed, just from statically analyzing an import that there isn't a runtime side-effect occurring. As such, rollup (and any bundler) will leave the call to @glint/template in the output code as a side-effecting import.

changing to import type resolves.

[barryofguilder]

That fixed it, thanks!

we can't recommend import { type ... } for type-only imports because we cannot be guaranteed, just from statically analyzing an import that there isn't a runtime side-effect occurring. As such, rollup (and any bundler) will leave the call to @glint/template in the output code as a side-effecting import.

changing to import type resolves.

Is this only for type-only imports from the "@glint/template" package or does this go for all type-only imports for any package? I have a bunch of other type-only imports where I do { type Foo } from .. and there are no issues.

[NullVoxPopuli]

"@glint/template" package or does this go for all type-only imports for any package?

it goes for any package. You may not run in to errors at runtime from other packages because @glint/template does not have any runtime code -- so it can't be resolved.

But for your other packages, you'll likely still have side-effectful imports in your output. This may be fine for your use case (esp as a runtime module exists), but it's something to keep in mind.