Ember w/ vite

[gossi]

Ember is swapping its build system to be powered by vite - and all Emberenos are very excited.

Ember's old (classic) build system is still in use and we expect the community to migrate. Migrating your ember app to vite is what we all want to do, but not done overnight, we are speaking about months to quarters.

Ember build systems and their compatibility with storybook:

• Ember classic build (brocooli): Storybook <= 9
• Embroider build (webpack): Storybook <= 9
• Ember vite bulid: Storybook 10+

Plan with Ember

What I want to support with Ember in general

• Support vite
• Support *.stories.gjs and *.stories.gts (Ember's file extension)
• Support Typescript
• Isolated rendering: Components are rendered as is (no integration into an app)
• App backed randering: Load an Existing App into Storybook (often necessary for services a component needs to access)
• Decorators for Ember Services: To mock services for storybook (as an alternative/extension to load an App)
• Support CSF next: For the mentioned decorators as well as allowing custom decorators for end-users
• Docs Mode: Render Arguments (future PR)
• Docs Mode: Render Blocks (Ember's slots) (future PR)

What I did

I started to port over Ember to use @storybook/builder-vite. With ember@6.8 (at the time I started the project, ember@6.8 was beta) there is also the new renderComponent() API, which was designed for situations like storybook integration.

I figured the Storybook APIs to make that work. And was able to make a button.stories.gjs file able to run through that loader - but then things starting to break.

I have not done any cleanup of the existing code (you still see old things that surely are candidate for removal)

Where is it Breaking?

• Storybook: Works cool 😎
• Ember: Works cool 😎
• Build Systems: They are fighting each other ⚔️

Storybook serve

When Storybook serves (through esbuild), it "optimizes" things not clearly enough and duplicates Ember (glimmer) code. Ember follows the Highlander principle (there can only be one!) and duplicated code is the enemy here:

COMPONENT_MANAGERS (a WeakMap) showing up in two locations leads to this error:

vite-app.js:25 Error: Assertion Failed: Attempted to load a component, but there wasn't a component manager associated with the definition. The definition was: @glimmer/component/template-only
    at assert3 (assert.js:38:13)
    at assert (index-CSBLX1Fi.js:4155:24)
    at debugAssert (index.js:28:21)
    at getInternalComponentManager (index.js:320:32)
    at ConstantsImpl.component (index.js:73:21)
    at index.js:4222:32
    at renderComponent (index.js:4241:3)
    at index-CSBLX1Fi.js:5158:22
    at ComponentRootState.<anonymous> (index-CSBLX1Fi.js:5135:9)
    at ComponentRootState.render (index-CSBLX1Fi.js:5172:5)

Storybook build

When storybook builds (through rollup) the assets for hosting your storybook different errors show up:

Uncaught TypeError: Failed to resolve module specifier "@embroider/macros". Relative references must start with either "/", "./", or "../".

What's next?

The build system needs taming. I myself am running out of options, I'm hoping for the ember community to support here.

[coderabbitai]

Important

Review skipped

Draft detected.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

✨ Finishing touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[nx-cloud]

View your CI Pipeline Execution ↗ for commit d247486

Command	Status	Duration	Result
nx run-many -t build --parallel=3	✅ Succeeded	48s	View ↗

---

☁️ Nx Cloud last updated this comment at 2025-10-22 08:15:56 UTC