upgrading to storybook 8

[maxp121]

Current Behavior

i'm trying to upgrade to storybook 8 in a monorepo and getting an error that says main.js missing.

Expected Behavior

storybook to be upgraded to version 8 and project migrated

GitHub Repo

No response

Steps to Reproduce

1. run npx storybook@latest upgrade

Nx Report

Node   : 20.9.0
   OS     : win32-x64
   npm    : 10.4.0

   nx                 : 18.0.4
   @nx/js             : 18.0.4
   @nx/jest           : 18.0.4
   @nx/linter         : 18.0.4
   @nx/eslint         : 18.0.4
   @nx/workspace      : 18.0.4
   @nx/angular        : 18.0.4
   @nx/cypress        : 18.0.4
   @nx/devkit         : 18.0.4
   @nx/eslint-plugin  : 18.0.4
   @nx/nest           : 18.0.4
   @nx/node           : 18.0.4
   @nx/storybook      : 18.0.4
   @nrwl/tao          : 18.0.4
   @nx/web            : 18.0.4
   @nx/webpack        : 18.0.4
   nx-cloud           : 18.0.0
   typescript         : 5.3.3
   ---------------------------------------
   Community plugins:
   @fortawesome/angular-fontawesome : 0.14.1
   @ionic/angular                   : 6.7.5
   @ionic/angular-toolkit           : 5.0.3
   @ngrx/effects                    : 17.0.1
   @ngrx/entity                     : 17.0.1
   @ngrx/store                      : 17.0.1
   @ngrx/store-devtools             : 17.0.1
   @storybook/angular               : 7.6.14
   apollo-angular                   : 6.0.0
   ngx-extended-pdf-viewer          : 19.2.2

Failure Logs

SB_CORE-SERVER_0006 (MainFileMissingError): No configuration files have been found in your configDir: .storybook.
Storybook needs a "main.js" file, please add it.

You can pass a --config-dir flag to tell Storybook, where your main.js file is located at).

More info: https://storybook.js.org/docs/configure

Package Manager Version

No response

Operating System

• [ ] macOS
• [ ] Linux
• [X] Windows
• [ ] Other (Please specify)

Additional Information

No response

[jase88]

You can hint the storybook cli to the right directory with the flag --config-dir. For example: npx storybook@latest upgrade --config-dir ./apps/storybook/.storybook

[mandarini]

Hi there @maxp121 ! Thanks for filing an issue. here's the docs page:

https://nx.dev/recipes/storybook/upgrading-storybook

If you look at your logs, it says You can pass a --config-dir flag to tell Storybook, where your main.js file is located at).

Please let me know if you have any more questions! I will be closing this for now, since it's not a bug!

[mathieudehaeck]

When passing the --config-dir flag like this npx storybook@latest upgrade --config-dir ./libs/ui/.storybook I get the following error:

╭────────────────────────────────────────────────────────────────╮
│                                                                │
│   Upgrading Storybook from version 7.6.17 to version 8.0.5..   │
│                                                                │
╰────────────────────────────────────────────────────────────────╯
SB_CLI_UPGRADE_0005 (UpgradeStorybookUnknownCurrentVersionError): We couldn't determine the current version of Storybook in your project.

Are you running the Storybook CLI in a project without Storybook?
It might help if you specify your Storybook config directory with the --config-dir flag.
    at doUpgrade (/Users/myusername/.npm/_npx/bc7e1e37fcb46ffc/node_modules/@storybook/cli/dist/generate.js:612:358)
    at async withTelemetry (/Users/myusername/.npm/_npx/bc7e1e37fcb46ffc/node_modules/@storybook/core-server/dist/index.js:28:3579)
    at async upgrade (/Users/myusername/.npm/_npx/bc7e1e37fcb46ffc/node_modules/@storybook/cli/dist/generate.js:612:2097)

[github-actions[bot]]

This issue has been closed for more than 30 days. If this issue is still occuring, please open a new issue with more recent context.

[mandarini]

@mathieudehaeck this seems to be a problem with the storybook upgrade command. Can you please open an issue to the Storybook repo? Can you also make sure that libs/ui/.storybook exists, or if it needs a different syntax?