require() of ES Module not supported error when running Storybook 9 with Angular 18

[karental]

Summary

When attempting to run Storybook 9.1.15 with Angular 18, I encounter an ES module import error that prevents Storybook from starting because Angular 18 ships as pure ESM (.mjs files)

An unhandled exception occurred: require() of ES Module

Additional information

No response

Create a reproduction

No response

[dosubot[bot]]

Hi @karental! I'm Dosu and I’m helping the storybook team.

Storybook 9.1.15 isn't compatible with Angular 18's pure ESM modules because it relies on CommonJS require(), which can't load ESM packages. Recent Storybook releases—including 10.0.0-beta and specific canary builds—have migrated the Angular integration to ESM-only and replaced require() calls with ESM-compatible imports, resolving this error.

To fix the issue, upgrade to the latest Storybook beta or a recent canary version that includes these ESM compatibility changes. There is no workaround for Storybook 9.1.15 with Angular 18 ESM; upgrading is required. You can find more details about the ESM migration and relevant fixes in these pull requests: #32006, #32477, and #32243.

If you still see errors after upgrading, please share a minimal reproduction so we can help further.

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}