[Bug]: Ember with Storybook 8 doesn't work

[VincentMolinie]

Describe the bug

It throws compilation error when displaying Storybook about require not being defined

To Reproduce

• Generate a new Ember project

  npx ember new storybook-test-project

• Add storybook

  npx storybook@latest init

• Build Ember

  yarn ember build

• Start storybook

  yarn storybook

System

Storybook Environment Info:

  System:
    OS: macOS 14.1.2
    CPU: (10) x64 Apple M2 Pro
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.19.1 - ~/.nvm/versions/node/v18.19.1/bin/node
    Yarn: 1.22.21 - /usr/local/bin/yarn <----- active
    npm: 10.2.4 - ~/.nvm/versions/node/v18.19.1/bin/npm
    pnpm: 8.15.4 - ~/.nvm/versions/node/v18.14.0/bin/pnpm
  Browsers:
    Chrome: 123.0.6312.59
    Safari: 17.1.2
  npmPackages:
    @storybook/addon-essentials: ^8.0.4 => 8.0.4
    @storybook/addon-links: ^8.0.4 => 8.0.4
    @storybook/blocks: ^8.0.4 => 8.0.4
    @storybook/ember: ^8.0.4 => 8.0.4
    @storybook/test: ^8.0.4 => 8.0.4
    eslint-plugin-storybook: ^0.8.0 => 0.8.0
    storybook: ^8.0.4 => 8.0.4

Additional context

"ember-source": "~5.7.0"

[MorisR]

+1 Created a new ember project + used storybook npx command to add storybook to it, and I'm getting this error

global_1.global.require is not a function
TypeError: global_1.global.require is not a function
    at loadEmberApp (http://localhost:6006/vendors-node_modules_storybook_addon-essentials_dist_actions_preview_js-node_modules_storyboo-9ecee6.iframe.bundle.js:1148:36)
    at ./node_modules/@storybook/ember/dist/client/preview/render.js (http://localhost:6006/vendors-node_modules_storybook_addon-essentials_dist_actions_preview_js-node_modules_storyboo-9ecee6.iframe.bundle.js:1155:13)
    at __webpack_require__ (http://localhost:6006/runtime~main.iframe.bundle.js:28:33)
    at fn (http://localhost:6006/runtime~main.iframe.bundle.js:313:21)
    at ./node_modules/@storybook/ember/dist/client/preview/config.js (http://localhost:6006/vendors-node_modules_storybook_addon-essentials_dist_actions_preview_js-node_modules_storyboo-9ecee6.iframe.bundle.js:1018:16)
    at __webpack_require__ (http://localhost:6006/runtime~main.iframe.bundle.js:28:33)
    at fn (http://localhost:6006/runtime~main.iframe.bundle.js:313:21)
    at PreviewWeb.getProjectAnnotations (http://localhost:6006/main.iframe.bundle.js:124:75)
    at PreviewWeb.getProjectAnnotationsOrRenderError (http://localhost:6006/sb-preview/runtime.js:129:6367)
    at PreviewWeb.initialize (http://localhost:6006/sb-preview/runtime.js:129:5672)

[joshuabaran]

I get a similar error when upgrading from 6.5 to 8.

[gossi]

I think by now, ember ships with embroider build system active by default now. However, under storybook, you need to run the ember app the "classic" way with app.toTree().

If you only have one app, you can still make it possible by using an ENV var, e.g. you can start ember like so: STORYBOOK=true ember serve and in ember-cli-build.js you can detect that and run your logic. You might also run additional customizations to make your app run for storybook. Then put this in your package.json and do: pnpm start:storybook so nobody needs to remember the env var.

---

We have a chicken and egg... "race condition". When app v2 is defined, there might be @storybook/ember-webpack rsp @storybook/ember-vite packages for the respective loaders.

[VincentMolinie]

My app is running the classic way but I do have issue when running storybook@8 on it

[joshuabaran]

For me, this error went away after adding staticDirs in my .storybook/main.js file.

[MorisR]

I managed to make it work by installing @storybook/ember-cli-storybook as a dependency and then running storybook dev, but It's not the most ideal type of integration, as it modifies .storybook/preview-head.html as you introduce changes to Ember, witch does not support hot module reload in storybook and you'd have to re-run the app every time.

[aw1875]

Has anyone found a reliable way to get this working? Feel like I've been banging my head against the wall for a few days now with no luck

[gossi]

You need @storybook/ember-cli-storybook as devDep. @MorisR basically explained the fix in the comment above yours.

I gonna close this one. Please open a new bug if this persists.

[aw1875]

As MorisR mentioned this isn't ideal, especially for monorepos sharing a single storybook instance. I guess its technically a solution but is there anyway to modify something @storybook/ember-cli-storybook does to play nicely with a monorepo?

[gossi]

The app that is running storybook needs to have this dependency. The rest is up to how you organize your monorepo.

I always recommend having your own app only for storybook but nothing else, then the rest in addons. Engines are pretty well isolated, so no chance to have a storybook instance running there (I haven't been successful with that and others either).

Now, its up to your architecture to account for a storybook instance.

[aw1875]

@gossi Appreciate it, that sounds good, thanks!