[Bug] [Types] template-only <template> component cannot infer type

[NullVoxPopuli]

Initially reported: discourse/ember-route-template#3

🐞 Describe the Bug

Given this, application.gts,

// @ts-expect-error page-title does not provide types yet
import pageTitle from 'ember-page-title/helpers/page-title';
import Route from 'ember-route-template';

import Welcome from '../components/welcome';

export default Route(
  <template>
    {{pageTitle "PolarisStarter"}}

    <Welcome />

    {{outlet}}
  </template>
);

I get a squiggly underlining the whole export-default content

With this error:

Diagnostics:
1. glint: The inferred type of 'default' cannot be named without a reference to '.pnpm/@glimmer+interfaces@0.84.3/node_modules/@glimmer/interfaces'. This is likely not portable. A type annotation is necessary. [2742]

You can try this out on this branch of the Polaris starter: NullVoxPopuli/polaris-starter#19

for reference, in VSCode:

I also asked about this in the dev-typescript discord: https://discord.com/channels/480462759797063690/786312479620726804/1162787399676473364

I know there is a "work-around" to just specify a type, but I'd really like inference to work 🤔

Something suspicious here is how @glimmer/interfaces is involved at all.

This isn't specific to ember-route-template, as this problem happens on plain components as well:

Diagnostics:
1. glint: The inferred type of 'Excite' cannot be named without a reference to '.pnpm/@glint+template@1.2.1/node_modules/@glint/template/-private/integration'. This is likely not portable. A type annotation is necessary. [2742]

component:

export const Excite = <template>
  <div {{intensify}} style="position: fixed; bottom: 1rem; left: 1rem;">
    🥳
  </div>
</template>;

🔬 Minimal Reproduction

This branch: NullVoxPopuli/polaris-starter#19 (this is a very small app with ~ 4 files, 3 in the components directory).

Try it here on stackblitz: https://stackblitz.com/github/NullVoxPopuli/polaris-starter/tree/upgrade-webpack
(j/k, stackblitz is using node 18.18.0, which breaks with webpack, and they need to upgrade to 18.18.1 for the app to boot)

🌍 Environment

• Ember: - 5.3
• Node.js/npm: - 18.17.0
• OS: - Linux
• Browser: - n/a

➕ Additional Context

I've seen this error come and go before, and I know it can be brute-forced away by supplying explicit types, but:

• I don't want to
• TS should be able to figure it out (does it makes sense to PR to them?, is TS wrong? is this a TS bug? are my modules messed up? ())
• the above probably depends on what's going on @glimmer/interfaces -- we really need to just cut 1.0 and get out of the goofiness that is pre 1.0 semantics.

brb, my modules might be messed up

❯ npx are-my-node-modules-messed-up
ember-source asked for @glimmer/compiler 0.84.2 but got 0.84.3
  - in dependencies at node_modules/.pnpm/ember-source@5.3.0_@babel+core@7.23.2_@glimmer+component@1.1.2_@glint+template@1.2.1_rsvp@4.8.5_webpack@5.89.0/node_modules/ember-source

back, j/k, that wasn't it.

❯ npx are-my-node-modules-messed-up
Your node_modules look good.

[NullVoxPopuli]

looks like the answer is to set tsconfig.json to have declaration: false for apps.

the default @tsconfig/ember has declaration: true, which is needed for libraries: https://github.com/tsconfig/bases/blob/main/bases/ember.json#L65

so I think the app blueprint should be updated to have declaration: false
https://github.com/ember-cli/ember-cli/blob/master/blueprints/app/files/tsconfig.json

[NullVoxPopuli]

this is now a blueprint issue over here: ember-cli/ember-cli#10391

closing.

[ef4]

While I think it's fine to set declarations: false in apps, that seems like it's only a workaround for this bug.

Libraries also want to use template-only components and they will need declarations: true and then presumably you're back into having this problem.

I don't know what the proper fix would be, perhaps typescript would be happier if you had to list @glint/template as a peer.