Error: Could not find module `@glint/environment-ember-loose/glimmer-component`

DuBistKomisch commented 3 years ago

Hi, I'm trying out glint in an existing Ember TypeScript project (https://github.com/DuBistKomisch/nou2ube-web/pull/56) and I've got all the templates to pass when running npx glint, but when I npx ember serve and load it up my browser, I get a runtime module resolution error:

Error occurred:

- While rendering:
  -top-level
    application

Uncaught (in promise) Error: Could not find module `@glint/environment-ember-loose/glimmer-component` imported from `nou2ube/pods/components/route-application/component`
    missingModule loader.js:247
    findModule loader.js:258
    findDeps loader.js:168
    findModule loader.js:262
    requireModule loader.js:24
    ...

I notice in dist/assets/nou2ube.js each component references @glint/environment-ember-loose/glimmer-component, whereas I assume it's meant to become @glimmer/component? The glint modules don't appear in dist/assets/vender.js at all.

The same thing can be observed in the assets of ts-ember-app example, although there's nothing rendered anyway so you can't get an error at runtime.

Am I missing something obvious? Is it not meant to work at runtime? I can't see anything suggesting that in the README. I'm using 0.5.1.

timmorey commented 2 years ago

I ran into this issue in an addon, and found that I had to promote each of @glint/environment-ember-loose/glimmer-component, @glint/core and ember-auto-import to dependencies to get everything to load at runtime.

Looking at your app, I see that ember-auto-import is not listed in package.json. Adding it to the project may be sufficient to get this working.

DuBistKomisch commented 2 years ago

Good idea, I'll give that a try. This is definitely still a bug though.

DuBistKomisch commented 2 years ago

Yep, just doing yarn add --dev ember-auto-import@^1.11.3 (apparently ember-auto-import 2 just came out doesn't work with some other addons I'm using) did indeed fix it. I guess most people are already using ember-auto-import nowadays so I can see why it hadn't been noticed before, definitely deserves a mention in the README!

dfreeman commented 2 years ago

Note that Glint environments are designed to work even outside of ember-cli projects (the GlimmerX blueprint, for instance, use standalone Webpack by default), and ember-auto-import has been included in new Ember projects by default since sometime in 2019.

I've added a note to the environment-ember-loose README to hopefully clear this up in the future 🙂

typed-ember / glint

Error: Could not find module `@glint/environment-ember-loose/glimmer-component` #189