[Bug]: Could not find framework package: @storybook/ember-webpack5

langalex commented 1 year ago

Describe the bug

I'm getting an error when trying to add storybook 7 to a new Ember app. When runing npx storybook@latest init, I get asked which builder to use, and when then selecting Webpack 5, it tries to install a package that does not exist (@storybook/ember-webpack5). Error also happens when selecting Vite.

To Reproduce

$ ember --version
ember-cli: 3.28.6
node: 16.19.0

$ ember new storybook -sb --no-welcome --yarn true --lang en
$ cd storybook
$ npx storybook@latest init

 • Detecting project type. ✓
? We were not able to detect the right builder for your project. Please select one: › - Use arrow-keys. Return to submit.
    Vite
❯    Webpack 5

✔ We were not able to detect the right builder for your project. Please select one: › Webpack 5
 • Adding Storybook support to your "Ember" app
     Error: Could not find framework package: @storybook/ember-webpack5.
Make sure this package exists, and if it does, please file an issue as this might be a bug in Storybook.
    at getFrameworkPackage (/Users/alexanderlang/.npm/_npx/bc7e1e37fcb46ffc/node_modules/@storybook/cli/dist/generate.js:46:1255)
    at getFrameworkDetails (/Users/alexanderlang/.npm/_npx/bc7e1e37fcb46ffc/node_modules/@storybook/cli/dist/generate.js:49:569)
    at baseGenerator (/Users/alexanderlang/.npm/_npx/bc7e1e37fcb46ffc/node_modules/@storybook/cli/dist/generate.js:49:2207)
    at generator2 (/Users/alexanderlang/.npm/_npx/bc7e1e37fcb46ffc/node_modules/@storybook/cli/dist/generate.js:57:4737)
    at runGenerator (/Users/alexanderlang/.npm/_npx/bc7e1e37fcb46ffc/node_modules/@storybook/cli/dist/generate.js:70:4729)
    at installStorybook (/Users/alexanderlang/.npm/_npx/bc7e1e37fcb46ffc/node_modules/@storybook/cli/dist/generate.js:74:795)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async doInitiate (/Users/alexanderlang/.npm/_npx/bc7e1e37fcb46ffc/node_modules/@storybook/cli/dist/generate.js:79:704)
    at async withTelemetry (/Users/alexanderlang/.npm/_npx/bc7e1e37fcb46ffc/node_modules/@storybook/core-server/dist/index.js:35:3422)
    at async initiate (/Users/alexanderlang/.npm/_npx/bc7e1e37fcb46ffc/node_modules/@storybook/cli/dist/generate.js:90:108)

System

Environment Info:

  System:
    OS: macOS 13.3.1
    CPU: (10) arm64 Apple M1 Pro
  Binaries:
    Node: 16.19.0 - ~/.asdf/installs/nodejs/lts-gallium/bin/node
    Yarn: 1.22.19 - ~/.yarn/bin/yarn
    npm: 8.19.3 - ~/.asdf/plugins/nodejs/shims/npm
  Browsers:
    Chrome: 113.0.5672.126
    Firefox: 113.0.1
    Safari: 16.4
  npmGlobalPackages:
    @storybook/docs-mdx: 0.1.0

Additional context

Current storybook version on npm is 7.0.12.

JackHowa commented 1 year ago

I had the same problem. I also tried vite just to see what would happen -- and same error.

tsengia commented 1 year ago

Also seeing this on npm v 9.7.1 Windows 11 OS, node v18.12.0 webpack v5.86.0

shilman commented 1 year ago

This looks like a CLI bug with the project generator.

If you manually edit the project and change @storybook/ember-webpack5 to @storybook/ember everywhere, does that fix the problem?

shama commented 1 year ago

I was able to get passed this error by editing node_modules/@storybook/cli/dist/generate.js and setting frameworkPackage="@storybook/ember" when it's calling getFrameworkPackage() but then hit a rabbit hole of other issues:

sh: start-storybook: command not found so I updated the package.json to "storybook": "storybook dev" but then hit Cannot find module '@storybook/ember/preset'
Ran npx storybook upgrade but then hit Failed to load preset: "@storybook/ember/preset" \n Error: Cannot find module './dist/cjs/preset'
It wanted me to install react and react-dom for some reason (I'm not using React) but after installing, it was able to build and launch the website but then immediately fails.
Lots of ModuleNotFoundError: Module not found: Error: Can't resolve 'fs' and related errors in the console.
I had to remove "@storybook/addon-mdx-gfm" from the addons.
I had to add core: { builder: '@storybook/builder-webpack5', } to the main.js config.
The website launches then errors with Expected your framework's preset to export a 'renderToCanvas' field.
I looked at the migration guide and it states "Each framework must export a renderToDOM function and parameters.framework. We'll be adding more documentation for framework authors in a future release."

I tried lots of other various things I didn't document sorry but I wasn't able to get storybook 7.0 or 6.5 working with fresh Ember 4.x or 5.x apps. I think there is a fundamental issue with Storybook and Ember. I'm using Node.js 16.19.0 on macos 13.4.

apovedq commented 6 months ago

I tried npx sb init --builder @storybook/builder-vite and it worked for me. At least to use it and run it...

shama commented 6 months ago

@apovedq Could you provide more info on how it worked for you?

I just did: ember create test-ember-sb to create a new Ember app (5.4.0) and then ran npx sb init --builder @storybook/builder-vite to add Storybook. Running the script storybook adds results in an error right away:

npm run storybook

> test-ember-sb@0.0.0 storybook
> start-storybook -p 6006 -s dist

sh: start-storybook: command not found

storybookjs / storybook