search

storybookjs / storybook

Storybook is the industry standard workshop for building, documenting, and testing UI components in isolation
https://storybook.js.org
MIT License
83.98k stars 9.23k forks source link

[Bug]: Storybook 7 migration fails with main.cjs #21553

Closed penx closed 1 year ago

penx commented 1 year ago

Describe the bug

I have a monorepo with packages that are type: module and contain storybooks. The config file has to be main.cjs, and so that main.cjs can import from src it sits in the src folder.

i.e. the config file is at libs/my-lib/src/.storybook/main.cjs

When running npx storybook@next upgrade --prerelease --config-dir src/.storybook/ from libs/my-lib, I get the following error:

╭ Migration check ran with failures 
│                                                
│         Successful migrations:
│                                           
│    eslintPlugin                   
│                                           
│           Failed migrations:  
│                                           
│       nodejs-requirement: 
│       Unable to find or evaluate src/.storybook/main.cjs: Cannot find module '✂️/libs/my-lib/src/.storybook/main'   │
│       Require stack:                                                                        
│       - ✂️/node_modules/@storybook/core-common/dist/index.js
│       - ✂️/node_modules/@storybook/telemetry/dist/index.js
│       - ✂️/node_modules/@storybook/cli/dist/generate.js
│       - ✂️/node_modules/@storybook/cli/bin/index.js

To Reproduce

No response

System

No response

Additional context

This isn't an issue for me as I can do the upgrade without the migration, but raising as perhaps you want to fix :)

Also this can be worked around by renaming main.cjs to main.js, running the migration and then naming back again.

shilman commented 1 year ago

Do you a have a reproduction repo you can share? If not, can you create one? See how to create a repro. Thank you! 🙏

ndelangen commented 1 year ago

Why does the config need to be main.cjs?

You can use a default export in SB7 now.

A reproduction would still be welcome though!

penx commented 1 year ago

Why does the config need to be main.cjs?

You can use a default export in SB7 now.

Because this was using the migration scripts to migrate from storybook 6 to 7, which requires the .cjs extension if you are running inside a package with type: module.

A reproduction would still be welcome though!

Will see if I can get to this soon, it should just be:

penx commented 1 year ago

I was able to recreate this with npx storybook@7.0.0-rc.1 upgrade but fixed by npx storybook@7.0.0-rc.3 upgrade so closing

penx commented 1 year ago

repro is here in case it is of use in future https://github.com/penx/repro-storybook-21553

to reproduce, run npx storybook@7.0.0-rc.1 upgrade --prerelease

ndelangen commented 1 year ago

@penx Your reproduction repo is empty

Screenshot 2023-03-27 at 10 31 25

penx commented 1 year ago

Oops, pushed now!

ndelangen commented 1 year ago

@penx I ran npx sb@next upgrade --prerelease twice on your repo.

After I ran yarn storybook and though it asked me a weird question about the port (i'll investigate), it did start for me.

I does seem like the upgrade command didn't fully work the first time, but then it did the second.

penx commented 1 year ago

Just checking you saw my comment above

I was able to recreate this with npx storybook@7.0.0-rc.1 upgrade but fixed by npx storybook@7.0.0-rc.3 upgrade so closing

https://github.com/storybookjs/storybook/issues/21553#issuecomment-1481562144

I added the reproduction just in case anyone needs to revisit.

ndelangen commented 1 year ago

@shilman @yannbf Can either of you hypotasize why running the upgrade command once, didn't work, but running it twice did?

Here's the complete log:

(main) % yarn                                                                                                                                                                                                                                ~/Projects/Stroybook/repros/repro-storybook-21553
yarn install v1.22.19
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
warning " > @storybook/addon-essentials@6.5.16" has unmet peer dependency "@babel/core@^7.9.6".
warning "@storybook/addon-essentials > @storybook/addon-actions > react-inspector@5.1.1" has incorrect peer dependency "react@^16.8.4 || ^17.0.0".
warning "@storybook/addon-essentials > @storybook/addon-docs > @babel/plugin-transform-react-jsx@7.21.0" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "@storybook/addon-essentials > @storybook/addon-docs > @babel/preset-env@7.20.2" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "@storybook/addon-essentials > @storybook/addon-docs > @mdx-js/react@1.6.22" has incorrect peer dependency "react@^16.13.1 || ^17.0.0".
warning "@storybook/addon-essentials > @storybook/addon-docs > babel-loader@8.3.0" has unmet peer dependency "@babel/core@^7.0.0".
warning "@storybook/addon-essentials > @storybook/addon-docs > babel-loader@8.3.0" has unmet peer dependency "webpack@>=2".
warning "@storybook/react > @babel/preset-react@7.18.6" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "@storybook/addon-essentials > @storybook/addon-docs > @babel/plugin-transform-react-jsx > @babel/plugin-syntax-jsx@7.18.6" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "@storybook/addon-essentials > @storybook/addon-docs > @babel/preset-env > @babel/helper-compilation-targets@7.20.7" has unmet peer dependency "@babel/core@^7.0.0".
warning "@storybook/addon-essentials > @storybook/addon-docs > @babel/preset-env > @babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@7.18.6" has unmet peer dependency "@babel/core@^7.0.0".
warning "@storybook/addon-essentials > @storybook/addon-docs > @babel/preset-env > @babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@7.20.7" has unmet peer dependency "@babel/core@^7.13.0".
warning "@storybook/addon-essentials > @storybook/addon-docs > @babel/preset-env > @babel/plugin-proposal-async-generator-functions@7.20.7" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "@storybook/addon-essentials > @storybook/addon-docs > @babel/preset-env > @babel/plugin-proposal-class-static-block@7.21.0" has unmet peer dependency "@babel/core@^7.12.0".
warning "@storybook/addon-essentials > @storybook/addon-docs > @babel/preset-env > @babel/plugin-proposal-dynamic-import@7.18.6" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "@storybook/addon-essentials > @storybook/addon-docs > @babel/preset-env > @babel/plugin-proposal-export-namespace-from@7.18.9" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "@storybook/addon-essentials > @storybook/addon-docs > @babel/preset-env > @babel/plugin-proposal-json-strings@7.18.6" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "@storybook/addon-essentials > @storybook/addon-docs > @babel/preset-env > @babel/plugin-proposal-logical-assignment-operators@7.20.7" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "@storybook/addon-essentials > @storybook/addon-docs > @babel/preset-env > @babel/plugin-proposal-numeric-separator@7.18.6" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "@storybook/addon-essentials > @storybook/addon-docs > @babel/preset-env > @babel/plugin-proposal-optional-catch-binding@7.18.6" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "@storybook/addon-essentials > @storybook/addon-docs > @babel/preset-env > @babel/plugin-proposal-unicode-property-regex@7.18.6" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "@storybook/addon-essentials > @storybook/addon-docs > @babel/preset-env > @babel/plugin-syntax-async-generators@7.8.4" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "@storybook/addon-essentials > @storybook/addon-docs > @babel/preset-env > @babel/plugin-syntax-class-properties@7.12.13" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "@storybook/addon-essentials > @storybook/addon-docs > @babel/preset-env > @babel/plugin-syntax-class-static-block@7.14.5" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "@storybook/addon-essentials > @storybook/addon-docs > @babel/preset-env > @babel/plugin-syntax-export-namespace-from@7.8.3" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "@storybook/addon-essentials > @storybook/addon-docs > @babel/preset-env > @babel/plugin-syntax-import-assertions@7.20.0" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "@storybook/addon-essentials > @storybook/addon-docs > @babel/preset-env > @babel/plugin-syntax-json-strings@7.8.3" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "@storybook/addon-essentials > @storybook/addon-docs > @babel/preset-env > @babel/plugin-syntax-logical-assignment-operators@7.10.4" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "@storybook/addon-essentials > @storybook/addon-docs > @babel/preset-env > @babel/plugin-syntax-nullish-coalescing-operator@7.8.3" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "@storybook/addon-essentials > @storybook/addon-docs > @babel/preset-env > @babel/plugin-syntax-numeric-separator@7.10.4" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "@storybook/addon-essentials > @storybook/addon-docs > @babel/preset-env > @babel/plugin-syntax-object-rest-spread@7.8.3" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "@storybook/addon-essentials > @storybook/addon-docs > @babel/preset-env > @babel/plugin-syntax-optional-catch-binding@7.8.3" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "@storybook/addon-essentials > @storybook/addon-docs > @babel/preset-env > @babel/plugin-syntax-optional-chaining@7.8.3" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "@storybook/addon-essentials > @storybook/addon-docs > @babel/preset-env > @babel/plugin-syntax-private-property-in-object@7.14.5" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "@storybook/addon-essentials > @storybook/addon-docs > @babel/preset-env > @babel/plugin-syntax-top-level-await@7.14.5" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "@storybook/addon-essentials > @storybook/addon-docs > @babel/preset-env > @babel/plugin-transform-async-to-generator@7.20.7" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "@storybook/addon-essentials > @storybook/addon-docs > @babel/preset-env > @babel/plugin-transform-block-scoped-functions@7.18.6" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "@storybook/addon-essentials > @storybook/addon-docs > @babel/preset-env > @babel/plugin-transform-computed-properties@7.20.7" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "@storybook/addon-essentials > @storybook/addon-docs > @babel/preset-env > @babel/plugin-transform-dotall-regex@7.18.6" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "@storybook/addon-essentials > @storybook/addon-docs > @babel/preset-env > @babel/plugin-transform-duplicate-keys@7.18.9" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "@storybook/addon-essentials > @storybook/addon-docs > @babel/preset-env > @babel/plugin-transform-exponentiation-operator@7.18.6" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "@storybook/addon-essentials > @storybook/addon-docs > @babel/preset-env > @babel/plugin-transform-function-name@7.18.9" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "@storybook/addon-essentials > @storybook/addon-docs > @babel/preset-env > @babel/plugin-transform-literals@7.18.9" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "@storybook/addon-essentials > @storybook/addon-docs > @babel/preset-env > @babel/plugin-transform-member-expression-literals@7.18.6" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "@storybook/addon-essentials > @storybook/addon-docs > @babel/preset-env > @babel/plugin-transform-modules-amd@7.20.11" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "@storybook/addon-essentials > @storybook/addon-docs > @babel/preset-env > @babel/plugin-transform-modules-commonjs@7.21.2" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "@storybook/addon-essentials > @storybook/addon-docs > @babel/preset-env > @babel/plugin-transform-modules-systemjs@7.20.11" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "@storybook/addon-essentials > @storybook/addon-docs > @babel/preset-env > @babel/plugin-transform-modules-umd@7.18.6" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "@storybook/addon-essentials > @storybook/addon-docs > @babel/preset-env > @babel/plugin-transform-named-capturing-groups-regex@7.20.5" has unmet peer dependency "@babel/core@^7.0.0".
warning "@storybook/addon-essentials > @storybook/addon-docs > @babel/preset-env > @babel/plugin-transform-new-target@7.18.6" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "@storybook/addon-essentials > @storybook/addon-docs > @babel/preset-env > @babel/plugin-transform-object-super@7.18.6" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "@storybook/addon-essentials > @storybook/addon-docs > @babel/preset-env > @babel/plugin-transform-property-literals@7.18.6" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "@storybook/addon-essentials > @storybook/addon-docs > @babel/preset-env > @babel/plugin-transform-regenerator@7.20.5" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "@storybook/addon-essentials > @storybook/addon-docs > @babel/preset-env > @babel/plugin-transform-reserved-words@7.18.6" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "@storybook/addon-essentials > @storybook/addon-docs > @babel/preset-env > @babel/plugin-transform-sticky-regex@7.18.6" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "@storybook/addon-essentials > @storybook/addon-docs > @babel/preset-env > @babel/plugin-transform-template-literals@7.18.9" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "@storybook/addon-essentials > @storybook/addon-docs > @babel/preset-env > @babel/plugin-transform-typeof-symbol@7.18.9" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "@storybook/addon-essentials > @storybook/addon-docs > @babel/preset-env > @babel/plugin-transform-unicode-escapes@7.18.10" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "@storybook/addon-essentials > @storybook/addon-docs > @babel/preset-env > @babel/plugin-transform-unicode-regex@7.18.6" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "@storybook/addon-essentials > @storybook/addon-docs > @babel/preset-env > @babel/preset-modules@0.1.5" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "@storybook/addon-essentials > @storybook/addon-docs > @babel/preset-env > babel-plugin-polyfill-corejs2@0.3.3" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "@storybook/addon-essentials > @storybook/addon-docs > @babel/preset-env > babel-plugin-polyfill-corejs3@0.6.0" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "@storybook/addon-essentials > @storybook/addon-docs > @babel/preset-env > babel-plugin-polyfill-regenerator@0.4.1" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "@storybook/addon-essentials > @storybook/addon-docs > @babel/preset-env > @babel/plugin-proposal-async-generator-functions > @babel/helper-remap-async-to-generator@7.18.9" has unmet peer dependency "@babel/core@^7.0.0".
warning "@storybook/addon-essentials > @storybook/addon-docs > @babel/preset-env > @babel/plugin-proposal-unicode-property-regex > @babel/helper-create-regexp-features-plugin@7.21.0" has unmet peer dependency "@babel/core@^7.0.0".
warning "@storybook/addon-essentials > @storybook/addon-docs > @babel/preset-env > babel-plugin-polyfill-corejs2 > @babel/helper-define-polyfill-provider@0.3.3" has unmet peer dependency "@babel/core@^7.4.0-0".
warning " > @storybook/react@6.5.16" has unmet peer dependency "require-from-string@^2.0.2".
warning "@storybook/react > @babel/preset-flow@7.18.6" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "@storybook/react > react-element-to-jsx-string@14.3.4" has incorrect peer dependency "react@^0.14.8 || ^15.0.1 || ^16.0.0 || ^17.0.1".
warning "@storybook/react > react-element-to-jsx-string@14.3.4" has incorrect peer dependency "react-dom@^0.14.8 || ^15.0.1 || ^16.0.0 || ^17.0.1".
warning "@storybook/react > @babel/preset-flow > @babel/plugin-transform-flow-strip-types@7.21.0" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "@storybook/react > @babel/preset-flow > @babel/plugin-transform-flow-strip-types > @babel/plugin-syntax-flow@7.18.6" has unmet peer dependency "@babel/core@^7.0.0-0".
[4/4] 🔨  Building fresh packages...
✨  Done in 21.13s.
(main) % npx sb@next upgrade --prerelease                                                                                                                                                                                                    ~/Projects/Stroybook/repros/repro-storybook-21553
Need to install the following packages:
  sb@7.0.0-rc.8
Ok to proceed? (y) y
 • Checking for latest versions of '@storybook/*' packagesinfo ,Using yarn
info Upgrading /Users/me/Projects/Stroybook/repros/repro-storybook-21553/package.json
info 
info  @storybook/addon-essentials    ^6.5.16  →  ^7.0.0-rc.8
info  @storybook/addon-interactions  ^6.5.16  →  ^7.0.0-rc.8
info  @storybook/addon-links         ^6.5.16  →  ^7.0.0-rc.8
info  @storybook/builder-vite         ^0.4.2  →  ^7.0.0-rc.8
info  @storybook/react               ^6.5.16  →  ^7.0.0-rc.8
info  storybook                      ^6.5.16  →  ^7.0.0-rc.8
info 
info Run yarn install to install new versions.
info ,npm WARN exec The following package was not found and will be installed: npm-check-updates@16.8.0
info 
info 
 • Installing upgrades • Preparing to install dependencies. ✓

yarn install v1.22.19
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...
success Saved lockfile.
✨  Done in 29.97s.
. ✓
🔎 checking possible migrations..

attention => Storybook now collects completely anonymous telemetry regarding usage.
This information is used to shape Storybook's roadmap and prioritize features.
You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL:
https://storybook.js.org/telemetry

🔎 found a 'mainjsFramework' migration:

╭───────────────────────────────────────────────────────────────────────────────────────────────────────╮
│                                                                                                       │
│   We've detected that your main.js configuration file does not specify the                            │
│   'framework' field, which is a requirement in SB7.0 and above. We can add one                        │
│   for you automatically:                                                                              │
│                                                                                                       │
│   framework: '@storybook/react'                                                                       │
│                                                                                                       │
│   More info: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#mainjs-framework-field   │
│                                                                                                       │
╰───────────────────────────────────────────────────────────────────────────────────────────────────────╯
✔ Do you want to run the 'mainjsFramework' migration on your project? … yes
✅ Setting 'framework' to '@storybook/react' in main.js
✅ ran mainjsFramework migration

✅ migration check successfully ran

It exited!

Now I run it a second time:

(main)⚡ % npx sb@next upgrade --prerelease                                                                                                                                                                                                  ~/Projects/Stroybook/repros/repro-storybook-21553
 • Checking for latest versions of '@storybook/*' packagesinfo ,Using yarn
info Upgrading /Users/me/Projects/Stroybook/repros/repro-storybook-21553/package.json
info 
info All dependencies match the @next package versions :)
info ,
info 
info ,Using yarn
info Upgrading /Users/me/Projects/Stroybook/repros/repro-storybook-21553/package.json
info 
info No dependencies.
info ,
 • Installing upgrades • Preparing to install dependencies. ✓

yarn install v1.22.19
[1/4] 🔍  Resolving packages...
success Already up-to-date.
✨  Done in 0.16s.
. ✓
🔎 checking possible migrations..

🔎 found a 'sb-scripts' migration:
╭ Automigration detected ──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╮
│                                                                                                                                                                                                          │
│   We've detected you are using Storybook 7.0.0 with scripts from previous versions of Storybook.                                                                                                         │
│   Starting in Storybook 7, the start-storybook and build-storybook binaries have changed to storybook dev and storybook build respectively.                                                              │
│   In order to work with Storybook 7.0.0, your storybook scripts have to be adjusted to use the binary. We can adjust them for you:                                                                       │
│                                                                                                                                                                                                          │
│   storybook                                                                                                                                                                                              │
│   from:                                                                                                                                                                                                  │
│   start-storybook                                                                                                                                                                                        │
│   to:                                                                                                                                                                                                    │
│   storybook dev                                                                                                                                                                                          │
│                                                                                                                                                                                                          │
│   build-storybook                                                                                                                                                                                        │
│   from:                                                                                                                                                                                                  │
│   build-storybook                                                                                                                                                                                        │
│   to:                                                                                                                                                                                                    │
│   storybook build                                                                                                                                                                                        │
│                                                                                                                                                                                                          │
│   In case this migration did not cover all of your scripts, or you'd like more info: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#start-storybook--build-storybook-binaries-removed   │
│                                                                                                                                                                                                          │
╰──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╯
✔ Do you want to run the 'sb-scripts' migration on your project? … yes
✅ Updating scripts in package.json

✅ ran sb-scripts migration

🔎 found a 'new-frameworks' migration:
╭ Automigration detected ──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╮
│                                                                                                                                                                                              │
│   We've detected your project is not fully setup with Storybook's 7 new framework format.                                                                                                    │
│                                                                                                                                                                                              │
│   Storybook 7 introduced the concept of frameworks, which abstracts configuration for renderers (e.g. React, Vue), builders (e.g. Webpack, Vite) and defaults to make integrations easier.   │
│                                                                                                                                                                                              │
│   Your project should be updated to use Storybook's framework: @storybook/react-vite. We can attempt to do this for you automatically.                                                       │
│                                                                                                                                                                                              │
│   Here are the steps this migration will do to migrate your project:                                                                                                                         │
│   - Remove the following dependencies:                                                                                                                                                       │
│         - * @storybook/builder-vite                                                                                                                                                          │
│   - Add the following dependencies:                                                                                                                                                          │
│         - * @storybook/react-vite                                                                                                                                                            │
│   - Remove the core.builder field in .storybook/main.cjs.                                                                                                                                    │
│                                                                                                                                                                                              │
│                                                                                                                                                                                              │
│   To learn more about the new framework format, see: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md##new-framework-api                                                      │
│                                                                                                                                                                                              │
╰──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╯
✔ Do you want to run the 'new-frameworks' migration on your project? … yes
✅ Removing dependencies: @storybook/builder-vite
✅ Installing new dependencies: @storybook/react-vite
yarn add v1.22.19
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...
success Saved lockfile.
success Saved 23 new dependencies.
info Direct dependencies
└─ @storybook/react-vite@7.0.0-rc.8
info All dependencies
├─ @bcoe/v8-coverage@0.2.3
├─ @joshwooding/vite-plugin-react-docgen-typescript@0.2.1
├─ @rollup/pluginutils@4.2.1
├─ @storybook/builder-vite@7.0.0-rc.8
├─ @storybook/react-vite@7.0.0-rc.8
├─ c8@7.13.0
├─ cliui@7.0.4
├─ commander@2.20.3
├─ estree-to-babel@3.2.1
├─ estree-walker@2.0.2
├─ foreground-child@2.0.0
├─ get-caller-file@2.0.5
├─ html-escaper@2.0.2
├─ istanbul-reports@3.1.5
├─ min-indent@1.0.1
├─ react-docgen-typescript@2.2.2
├─ react-docgen@6.0.0-alpha.3
├─ require-directory@2.1.1
├─ strip-indent@3.0.0
├─ v8-to-istanbul@9.1.0
├─ y18n@5.0.8
├─ yargs-parser@20.2.9
└─ yargs@16.2.0
✨  Done in 5.22s.
✅ Updating main.js
✅ Updating "framework" field
✅ Removing "core.builder" field
✅ Removing "core" field
✅ ran new-frameworks migration

🔎 found a 'github-flavored-markdown-mdx' migration:
╭ Automigration detected ────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╮
│                                                                                                                                                │
│   In MDX1 you had the option of using GitHub flavored markdown.                                                                                │
│                                                                                                                                                │
│   Storybook 7.0 uses MDX2 for compiling MDX, and thus no longer supports GFM out of the box.                                                   │
│   Because of this you need to explicitly add the GFM plugin in the addon-docs options:                                                         │
│   https://storybook.js.org/docs/7.0/react/writing-docs/mdx#lack-of-github-flavored-markdown-gfm                                                │
│                                                                                                                                                │
│   We recommend you follow the guide on the link above, however we can add a temporary storybook addon that helps make this migration easier.   │
│   We'll install the addon and add it to your storybook config.                                                                                 │
│                                                                                                                                                │
╰────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╯
✔ Do you want to run the 'github-flavored-markdown-mdx' migration on your project? … yes
yarn add v1.22.19
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...
success Saved lockfile.
success Saved 41 new dependencies.
info Direct dependencies
└─ @storybook/addon-mdx-gfm@7.0.0-rc.8
info All dependencies
├─ @storybook/addon-mdx-gfm@7.0.0-rc.8
├─ @types/debug@4.1.7
├─ @types/ms@0.7.31
├─ bail@2.0.2
├─ ccount@2.0.1
├─ character-entities@2.0.2
├─ diff@5.1.0
├─ is-plain-obj@4.1.0
├─ longest-streak@3.1.0
├─ markdown-table@3.0.3
├─ mdast-util-find-and-replace@2.2.2
├─ mdast-util-gfm-autolink-literal@1.0.3
├─ mdast-util-gfm-footnote@1.0.2
├─ mdast-util-gfm-strikethrough@1.0.3
├─ mdast-util-gfm-table@1.0.7
├─ mdast-util-gfm-task-list-item@1.0.2
├─ mdast-util-gfm@2.0.2
├─ mdast-util-phrasing@3.0.1
├─ mdast-util-to-string@3.1.1
├─ micromark-core-commonmark@1.0.6
├─ micromark-extension-gfm-autolink-literal@1.0.3
├─ micromark-extension-gfm-footnote@1.0.4
├─ micromark-extension-gfm-strikethrough@1.0.4
├─ micromark-extension-gfm-table@1.0.5
├─ micromark-extension-gfm-tagfilter@1.0.1
├─ micromark-extension-gfm-task-list-item@1.0.3
├─ micromark-extension-gfm@2.0.1
├─ micromark-factory-destination@1.0.0
├─ micromark-factory-label@1.0.2
├─ micromark-factory-title@1.0.2
├─ micromark-factory-whitespace@1.0.0
├─ micromark-util-html-tag-name@1.1.0
├─ micromark@3.1.0
├─ remark-gfm@3.0.1
├─ sade@1.8.1
├─ trough@2.1.0
├─ unified@10.1.2
├─ unist-util-visit-parents@5.1.3
├─ vfile-message@3.1.4
├─ vfile@5.3.7
└─ zwitch@2.0.4
✨  Done in 4.38s.
✅ Adding "@storybook/addon-mdx-gfm" addon
✅ ran github-flavored-markdown-mdx migration

╭ Migration check ran successfully ─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╮
│                                                                                                                                                               │
│                                                                                                                                                               │
│         Successful migrations:                                                                                                                                │
│                                                                                                                                                               │
│    sb-scripts, new-frameworks, github-flavored-markdown-mdx                                                                                                   │
│                                                                                                                                                               │
│       ─────────────────────────────────────────────────                                                                                                       │
│                                                                                                                                                               │
│       If you'd like to run the migrations again, you can do so by running 'npx storybook@next automigrate'                                                    │
│                                                                                                                                                               │
│   The automigrations try to migrate common patterns in your project, but might not contain everything needed to migrate to the latest version of Storybook.   │
│                                                                                                                                                               │
│   Please check the changelog and migration guide for manual migrations and more information: https://storybook.js.org/migration-guides/7.0                    │
│   And reach out on Discord if you need help: https://discord.gg/storybook                                                                                     │
│                                                                                                                                                               │
╰───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╯

I run yarn to ensure dependencies are truly installed

(main)⚡ % yarn                                                                                                                                                                                                                              ~/Projects/Stroybook/repros/repro-storybook-21553
yarn install v1.22.19
[1/4] 🔍  Resolving packages...
success Already up-to-date.
✨  Done in 0.17s.

Now I try and run storybook

(main)⚡ % yarn storybook                                                                                                                                                                                                                    ~/Projects/Stroybook/repros/repro-storybook-21553
yarn run v1.22.19
$ storybook dev
@storybook/cli v7.0.0-rc.8

✖ Port NaN is not available. Would you like to run Storybook on port 51221 instead? … yes
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Confusing... I decide to check the package.json file for something weird, I cannot find it, it's all normal

I try to run again

(main)⚡ [1] % yarn storybook                                                                                                                                                                                                                ~/Projects/Stroybook/repros/repro-storybook-21553
yarn run v1.22.19
$ storybook dev
@storybook/cli v7.0.0-rc.8

✔ Port NaN is not available. Would you like to run Storybook on port 51224 instead? … yes

WARN The "@storybook/addon-mdx-gfm" addon is meant as a migration assistant for Storybook 7.0; and will likely be removed in a future version.
WARN It's recommended you read this document:
WARN https://storybook.js.org/docs/7.0/react/writing-docs/mdx#lack-of-github-flavored-markdown-gfm
WARN 
WARN Once you've made the necessary changes, you can remove the addon from your package.json and storybook config.
info => Starting manager..
WARN No story files found for the specified pattern: src/**/*.mdx
╭─────────────────────────────────────────────────────╮
│                                                     │
│   Storybook 7.0.0-rc.8 for react-vite started       │
│   105 ms for manager and 2.82 s for preview         │
│                                                     │
│    Local:            http://localhost:51224/        │
│    On your network:  http://192.168.87.25:51224/    │
│                                                     │
╰─────────────────────────────────────────────────────╯
^C%

This time I just accept the random port, and it opened up.

ndelangen commented 1 year ago

@shilman @yannbf Can either of you hypotasize why running the upgrade command once, didn't work, but running it twice did?

Here's the complete log:

(main) % yarn                                                                                                                                                                                                                                ~/Projects/Stroybook/repros/repro-storybook-21553
yarn install v1.22.19
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
warning " > @storybook/addon-essentials@6.5.16" has unmet peer dependency "@babel/core@^7.9.6".
warning "@storybook/addon-essentials > @storybook/addon-actions > react-inspector@5.1.1" has incorrect peer dependency "react@^16.8.4 || ^17.0.0".
warning "@storybook/addon-essentials > @storybook/addon-docs > @babel/plugin-transform-react-jsx@7.21.0" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "@storybook/addon-essentials > @storybook/addon-docs > @babel/preset-env@7.20.2" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "@storybook/addon-essentials > @storybook/addon-docs > @mdx-js/react@1.6.22" has incorrect peer dependency "react@^16.13.1 || ^17.0.0".
warning "@storybook/addon-essentials > @storybook/addon-docs > babel-loader@8.3.0" has unmet peer dependency "@babel/core@^7.0.0".
warning "@storybook/addon-essentials > @storybook/addon-docs > babel-loader@8.3.0" has unmet peer dependency "webpack@>=2".
warning "@storybook/react > @babel/preset-react@7.18.6" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "@storybook/addon-essentials > @storybook/addon-docs > @babel/plugin-transform-react-jsx > @babel/plugin-syntax-jsx@7.18.6" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "@storybook/addon-essentials > @storybook/addon-docs > @babel/preset-env > @babel/helper-compilation-targets@7.20.7" has unmet peer dependency "@babel/core@^7.0.0".
warning "@storybook/addon-essentials > @storybook/addon-docs > @babel/preset-env > @babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@7.18.6" has unmet peer dependency "@babel/core@^7.0.0".
warning "@storybook/addon-essentials > @storybook/addon-docs > @babel/preset-env > @babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@7.20.7" has unmet peer dependency "@babel/core@^7.13.0".
warning "@storybook/addon-essentials > @storybook/addon-docs > @babel/preset-env > @babel/plugin-proposal-async-generator-functions@7.20.7" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "@storybook/addon-essentials > @storybook/addon-docs > @babel/preset-env > @babel/plugin-proposal-class-static-block@7.21.0" has unmet peer dependency "@babel/core@^7.12.0".
warning "@storybook/addon-essentials > @storybook/addon-docs > @babel/preset-env > @babel/plugin-proposal-dynamic-import@7.18.6" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "@storybook/addon-essentials > @storybook/addon-docs > @babel/preset-env > @babel/plugin-proposal-export-namespace-from@7.18.9" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "@storybook/addon-essentials > @storybook/addon-docs > @babel/preset-env > @babel/plugin-proposal-json-strings@7.18.6" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "@storybook/addon-essentials > @storybook/addon-docs > @babel/preset-env > @babel/plugin-proposal-logical-assignment-operators@7.20.7" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "@storybook/addon-essentials > @storybook/addon-docs > @babel/preset-env > @babel/plugin-proposal-numeric-separator@7.18.6" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "@storybook/addon-essentials > @storybook/addon-docs > @babel/preset-env > @babel/plugin-proposal-optional-catch-binding@7.18.6" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "@storybook/addon-essentials > @storybook/addon-docs > @babel/preset-env > @babel/plugin-proposal-unicode-property-regex@7.18.6" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "@storybook/addon-essentials > @storybook/addon-docs > @babel/preset-env > @babel/plugin-syntax-async-generators@7.8.4" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "@storybook/addon-essentials > @storybook/addon-docs > @babel/preset-env > @babel/plugin-syntax-class-properties@7.12.13" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "@storybook/addon-essentials > @storybook/addon-docs > @babel/preset-env > @babel/plugin-syntax-class-static-block@7.14.5" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "@storybook/addon-essentials > @storybook/addon-docs > @babel/preset-env > @babel/plugin-syntax-export-namespace-from@7.8.3" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "@storybook/addon-essentials > @storybook/addon-docs > @babel/preset-env > @babel/plugin-syntax-import-assertions@7.20.0" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "@storybook/addon-essentials > @storybook/addon-docs > @babel/preset-env > @babel/plugin-syntax-json-strings@7.8.3" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "@storybook/addon-essentials > @storybook/addon-docs > @babel/preset-env > @babel/plugin-syntax-logical-assignment-operators@7.10.4" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "@storybook/addon-essentials > @storybook/addon-docs > @babel/preset-env > @babel/plugin-syntax-nullish-coalescing-operator@7.8.3" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "@storybook/addon-essentials > @storybook/addon-docs > @babel/preset-env > @babel/plugin-syntax-numeric-separator@7.10.4" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "@storybook/addon-essentials > @storybook/addon-docs > @babel/preset-env > @babel/plugin-syntax-object-rest-spread@7.8.3" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "@storybook/addon-essentials > @storybook/addon-docs > @babel/preset-env > @babel/plugin-syntax-optional-catch-binding@7.8.3" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "@storybook/addon-essentials > @storybook/addon-docs > @babel/preset-env > @babel/plugin-syntax-optional-chaining@7.8.3" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "@storybook/addon-essentials > @storybook/addon-docs > @babel/preset-env > @babel/plugin-syntax-private-property-in-object@7.14.5" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "@storybook/addon-essentials > @storybook/addon-docs > @babel/preset-env > @babel/plugin-syntax-top-level-await@7.14.5" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "@storybook/addon-essentials > @storybook/addon-docs > @babel/preset-env > @babel/plugin-transform-async-to-generator@7.20.7" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "@storybook/addon-essentials > @storybook/addon-docs > @babel/preset-env > @babel/plugin-transform-block-scoped-functions@7.18.6" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "@storybook/addon-essentials > @storybook/addon-docs > @babel/preset-env > @babel/plugin-transform-computed-properties@7.20.7" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "@storybook/addon-essentials > @storybook/addon-docs > @babel/preset-env > @babel/plugin-transform-dotall-regex@7.18.6" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "@storybook/addon-essentials > @storybook/addon-docs > @babel/preset-env > @babel/plugin-transform-duplicate-keys@7.18.9" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "@storybook/addon-essentials > @storybook/addon-docs > @babel/preset-env > @babel/plugin-transform-exponentiation-operator@7.18.6" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "@storybook/addon-essentials > @storybook/addon-docs > @babel/preset-env > @babel/plugin-transform-function-name@7.18.9" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "@storybook/addon-essentials > @storybook/addon-docs > @babel/preset-env > @babel/plugin-transform-literals@7.18.9" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "@storybook/addon-essentials > @storybook/addon-docs > @babel/preset-env > @babel/plugin-transform-member-expression-literals@7.18.6" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "@storybook/addon-essentials > @storybook/addon-docs > @babel/preset-env > @babel/plugin-transform-modules-amd@7.20.11" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "@storybook/addon-essentials > @storybook/addon-docs > @babel/preset-env > @babel/plugin-transform-modules-commonjs@7.21.2" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "@storybook/addon-essentials > @storybook/addon-docs > @babel/preset-env > @babel/plugin-transform-modules-systemjs@7.20.11" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "@storybook/addon-essentials > @storybook/addon-docs > @babel/preset-env > @babel/plugin-transform-modules-umd@7.18.6" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "@storybook/addon-essentials > @storybook/addon-docs > @babel/preset-env > @babel/plugin-transform-named-capturing-groups-regex@7.20.5" has unmet peer dependency "@babel/core@^7.0.0".
warning "@storybook/addon-essentials > @storybook/addon-docs > @babel/preset-env > @babel/plugin-transform-new-target@7.18.6" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "@storybook/addon-essentials > @storybook/addon-docs > @babel/preset-env > @babel/plugin-transform-object-super@7.18.6" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "@storybook/addon-essentials > @storybook/addon-docs > @babel/preset-env > @babel/plugin-transform-property-literals@7.18.6" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "@storybook/addon-essentials > @storybook/addon-docs > @babel/preset-env > @babel/plugin-transform-regenerator@7.20.5" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "@storybook/addon-essentials > @storybook/addon-docs > @babel/preset-env > @babel/plugin-transform-reserved-words@7.18.6" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "@storybook/addon-essentials > @storybook/addon-docs > @babel/preset-env > @babel/plugin-transform-sticky-regex@7.18.6" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "@storybook/addon-essentials > @storybook/addon-docs > @babel/preset-env > @babel/plugin-transform-template-literals@7.18.9" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "@storybook/addon-essentials > @storybook/addon-docs > @babel/preset-env > @babel/plugin-transform-typeof-symbol@7.18.9" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "@storybook/addon-essentials > @storybook/addon-docs > @babel/preset-env > @babel/plugin-transform-unicode-escapes@7.18.10" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "@storybook/addon-essentials > @storybook/addon-docs > @babel/preset-env > @babel/plugin-transform-unicode-regex@7.18.6" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "@storybook/addon-essentials > @storybook/addon-docs > @babel/preset-env > @babel/preset-modules@0.1.5" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "@storybook/addon-essentials > @storybook/addon-docs > @babel/preset-env > babel-plugin-polyfill-corejs2@0.3.3" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "@storybook/addon-essentials > @storybook/addon-docs > @babel/preset-env > babel-plugin-polyfill-corejs3@0.6.0" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "@storybook/addon-essentials > @storybook/addon-docs > @babel/preset-env > babel-plugin-polyfill-regenerator@0.4.1" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "@storybook/addon-essentials > @storybook/addon-docs > @babel/preset-env > @babel/plugin-proposal-async-generator-functions > @babel/helper-remap-async-to-generator@7.18.9" has unmet peer dependency "@babel/core@^7.0.0".
warning "@storybook/addon-essentials > @storybook/addon-docs > @babel/preset-env > @babel/plugin-proposal-unicode-property-regex > @babel/helper-create-regexp-features-plugin@7.21.0" has unmet peer dependency "@babel/core@^7.0.0".
warning "@storybook/addon-essentials > @storybook/addon-docs > @babel/preset-env > babel-plugin-polyfill-corejs2 > @babel/helper-define-polyfill-provider@0.3.3" has unmet peer dependency "@babel/core@^7.4.0-0".
warning " > @storybook/react@6.5.16" has unmet peer dependency "require-from-string@^2.0.2".
warning "@storybook/react > @babel/preset-flow@7.18.6" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "@storybook/react > react-element-to-jsx-string@14.3.4" has incorrect peer dependency "react@^0.14.8 || ^15.0.1 || ^16.0.0 || ^17.0.1".
warning "@storybook/react > react-element-to-jsx-string@14.3.4" has incorrect peer dependency "react-dom@^0.14.8 || ^15.0.1 || ^16.0.0 || ^17.0.1".
warning "@storybook/react > @babel/preset-flow > @babel/plugin-transform-flow-strip-types@7.21.0" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "@storybook/react > @babel/preset-flow > @babel/plugin-transform-flow-strip-types > @babel/plugin-syntax-flow@7.18.6" has unmet peer dependency "@babel/core@^7.0.0-0".
[4/4] 🔨  Building fresh packages...
✨  Done in 21.13s.
(main) % npx sb@next upgrade --prerelease                                                                                                                                                                                                    ~/Projects/Stroybook/repros/repro-storybook-21553
Need to install the following packages:
  sb@7.0.0-rc.8
Ok to proceed? (y) y
 • Checking for latest versions of '@storybook/*' packagesinfo ,Using yarn
info Upgrading /Users/me/Projects/Stroybook/repros/repro-storybook-21553/package.json
info 
info  @storybook/addon-essentials    ^6.5.16  →  ^7.0.0-rc.8
info  @storybook/addon-interactions  ^6.5.16  →  ^7.0.0-rc.8
info  @storybook/addon-links         ^6.5.16  →  ^7.0.0-rc.8
info  @storybook/builder-vite         ^0.4.2  →  ^7.0.0-rc.8
info  @storybook/react               ^6.5.16  →  ^7.0.0-rc.8
info  storybook                      ^6.5.16  →  ^7.0.0-rc.8
info 
info Run yarn install to install new versions.
info ,npm WARN exec The following package was not found and will be installed: npm-check-updates@16.8.0
info 
info 
 • Installing upgrades • Preparing to install dependencies. ✓

yarn install v1.22.19
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...
success Saved lockfile.
✨  Done in 29.97s.
. ✓
🔎 checking possible migrations..

attention => Storybook now collects completely anonymous telemetry regarding usage.
This information is used to shape Storybook's roadmap and prioritize features.
You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL:
https://storybook.js.org/telemetry

🔎 found a 'mainjsFramework' migration:

╭───────────────────────────────────────────────────────────────────────────────────────────────────────╮
│                                                                                                       │
│   We've detected that your main.js configuration file does not specify the                            │
│   'framework' field, which is a requirement in SB7.0 and above. We can add one                        │
│   for you automatically:                                                                              │
│                                                                                                       │
│   framework: '@storybook/react'                                                                       │
│                                                                                                       │
│   More info: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#mainjs-framework-field   │
│                                                                                                       │
╰───────────────────────────────────────────────────────────────────────────────────────────────────────╯
✔ Do you want to run the 'mainjsFramework' migration on your project? … yes
✅ Setting 'framework' to '@storybook/react' in main.js
✅ ran mainjsFramework migration

✅ migration check successfully ran

It exited!

Now I run it a second time:

(main)⚡ % npx sb@next upgrade --prerelease                                                                                                                                                                                                  ~/Projects/Stroybook/repros/repro-storybook-21553
 • Checking for latest versions of '@storybook/*' packagesinfo ,Using yarn
info Upgrading /Users/me/Projects/Stroybook/repros/repro-storybook-21553/package.json
info 
info All dependencies match the @next package versions :)
info ,
info 
info ,Using yarn
info Upgrading /Users/me/Projects/Stroybook/repros/repro-storybook-21553/package.json
info 
info No dependencies.
info ,
 • Installing upgrades • Preparing to install dependencies. ✓

yarn install v1.22.19
[1/4] 🔍  Resolving packages...
success Already up-to-date.
✨  Done in 0.16s.
. ✓
🔎 checking possible migrations..

🔎 found a 'sb-scripts' migration:
╭ Automigration detected ──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╮
│                                                                                                                                                                                                          │
│   We've detected you are using Storybook 7.0.0 with scripts from previous versions of Storybook.                                                                                                         │
│   Starting in Storybook 7, the start-storybook and build-storybook binaries have changed to storybook dev and storybook build respectively.                                                              │
│   In order to work with Storybook 7.0.0, your storybook scripts have to be adjusted to use the binary. We can adjust them for you:                                                                       │
│                                                                                                                                                                                                          │
│   storybook                                                                                                                                                                                              │
│   from:                                                                                                                                                                                                  │
│   start-storybook                                                                                                                                                                                        │
│   to:                                                                                                                                                                                                    │
│   storybook dev                                                                                                                                                                                          │
│                                                                                                                                                                                                          │
│   build-storybook                                                                                                                                                                                        │
│   from:                                                                                                                                                                                                  │
│   build-storybook                                                                                                                                                                                        │
│   to:                                                                                                                                                                                                    │
│   storybook build                                                                                                                                                                                        │
│                                                                                                                                                                                                          │
│   In case this migration did not cover all of your scripts, or you'd like more info: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#start-storybook--build-storybook-binaries-removed   │
│                                                                                                                                                                                                          │
╰──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╯
✔ Do you want to run the 'sb-scripts' migration on your project? … yes
✅ Updating scripts in package.json

✅ ran sb-scripts migration

🔎 found a 'new-frameworks' migration:
╭ Automigration detected ──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╮
│                                                                                                                                                                                              │
│   We've detected your project is not fully setup with Storybook's 7 new framework format.                                                                                                    │
│                                                                                                                                                                                              │
│   Storybook 7 introduced the concept of frameworks, which abstracts configuration for renderers (e.g. React, Vue), builders (e.g. Webpack, Vite) and defaults to make integrations easier.   │
│                                                                                                                                                                                              │
│   Your project should be updated to use Storybook's framework: @storybook/react-vite. We can attempt to do this for you automatically.                                                       │
│                                                                                                                                                                                              │
│   Here are the steps this migration will do to migrate your project:                                                                                                                         │
│   - Remove the following dependencies:                                                                                                                                                       │
│         - * @storybook/builder-vite                                                                                                                                                          │
│   - Add the following dependencies:                                                                                                                                                          │
│         - * @storybook/react-vite                                                                                                                                                            │
│   - Remove the core.builder field in .storybook/main.cjs.                                                                                                                                    │
│                                                                                                                                                                                              │
│                                                                                                                                                                                              │
│   To learn more about the new framework format, see: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md##new-framework-api                                                      │
│                                                                                                                                                                                              │
╰──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╯
✔ Do you want to run the 'new-frameworks' migration on your project? … yes
✅ Removing dependencies: @storybook/builder-vite
✅ Installing new dependencies: @storybook/react-vite
yarn add v1.22.19
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...
success Saved lockfile.
success Saved 23 new dependencies.
info Direct dependencies
└─ @storybook/react-vite@7.0.0-rc.8
info All dependencies
├─ @bcoe/v8-coverage@0.2.3
├─ @joshwooding/vite-plugin-react-docgen-typescript@0.2.1
├─ @rollup/pluginutils@4.2.1
├─ @storybook/builder-vite@7.0.0-rc.8
├─ @storybook/react-vite@7.0.0-rc.8
├─ c8@7.13.0
├─ cliui@7.0.4
├─ commander@2.20.3
├─ estree-to-babel@3.2.1
├─ estree-walker@2.0.2
├─ foreground-child@2.0.0
├─ get-caller-file@2.0.5
├─ html-escaper@2.0.2
├─ istanbul-reports@3.1.5
├─ min-indent@1.0.1
├─ react-docgen-typescript@2.2.2
├─ react-docgen@6.0.0-alpha.3
├─ require-directory@2.1.1
├─ strip-indent@3.0.0
├─ v8-to-istanbul@9.1.0
├─ y18n@5.0.8
├─ yargs-parser@20.2.9
└─ yargs@16.2.0
✨  Done in 5.22s.
✅ Updating main.js
✅ Updating "framework" field
✅ Removing "core.builder" field
✅ Removing "core" field
✅ ran new-frameworks migration

🔎 found a 'github-flavored-markdown-mdx' migration:
╭ Automigration detected ────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╮
│                                                                                                                                                │
│   In MDX1 you had the option of using GitHub flavored markdown.                                                                                │
│                                                                                                                                                │
│   Storybook 7.0 uses MDX2 for compiling MDX, and thus no longer supports GFM out of the box.                                                   │
│   Because of this you need to explicitly add the GFM plugin in the addon-docs options:                                                         │
│   https://storybook.js.org/docs/7.0/react/writing-docs/mdx#lack-of-github-flavored-markdown-gfm                                                │
│                                                                                                                                                │
│   We recommend you follow the guide on the link above, however we can add a temporary storybook addon that helps make this migration easier.   │
│   We'll install the addon and add it to your storybook config.                                                                                 │
│                                                                                                                                                │
╰────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╯
✔ Do you want to run the 'github-flavored-markdown-mdx' migration on your project? … yes
yarn add v1.22.19
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...
success Saved lockfile.
success Saved 41 new dependencies.
info Direct dependencies
└─ @storybook/addon-mdx-gfm@7.0.0-rc.8
info All dependencies
├─ @storybook/addon-mdx-gfm@7.0.0-rc.8
├─ @types/debug@4.1.7
├─ @types/ms@0.7.31
├─ bail@2.0.2
├─ ccount@2.0.1
├─ character-entities@2.0.2
├─ diff@5.1.0
├─ is-plain-obj@4.1.0
├─ longest-streak@3.1.0
├─ markdown-table@3.0.3
├─ mdast-util-find-and-replace@2.2.2
├─ mdast-util-gfm-autolink-literal@1.0.3
├─ mdast-util-gfm-footnote@1.0.2
├─ mdast-util-gfm-strikethrough@1.0.3
├─ mdast-util-gfm-table@1.0.7
├─ mdast-util-gfm-task-list-item@1.0.2
├─ mdast-util-gfm@2.0.2
├─ mdast-util-phrasing@3.0.1
├─ mdast-util-to-string@3.1.1
├─ micromark-core-commonmark@1.0.6
├─ micromark-extension-gfm-autolink-literal@1.0.3
├─ micromark-extension-gfm-footnote@1.0.4
├─ micromark-extension-gfm-strikethrough@1.0.4
├─ micromark-extension-gfm-table@1.0.5
├─ micromark-extension-gfm-tagfilter@1.0.1
├─ micromark-extension-gfm-task-list-item@1.0.3
├─ micromark-extension-gfm@2.0.1
├─ micromark-factory-destination@1.0.0
├─ micromark-factory-label@1.0.2
├─ micromark-factory-title@1.0.2
├─ micromark-factory-whitespace@1.0.0
├─ micromark-util-html-tag-name@1.1.0
├─ micromark@3.1.0
├─ remark-gfm@3.0.1
├─ sade@1.8.1
├─ trough@2.1.0
├─ unified@10.1.2
├─ unist-util-visit-parents@5.1.3
├─ vfile-message@3.1.4
├─ vfile@5.3.7
└─ zwitch@2.0.4
✨  Done in 4.38s.
✅ Adding "@storybook/addon-mdx-gfm" addon
✅ ran github-flavored-markdown-mdx migration

╭ Migration check ran successfully ─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╮
│                                                                                                                                                               │
│                                                                                                                                                               │
│         Successful migrations:                                                                                                                                │
│                                                                                                                                                               │
│    sb-scripts, new-frameworks, github-flavored-markdown-mdx                                                                                                   │
│                                                                                                                                                               │
│       ─────────────────────────────────────────────────                                                                                                       │
│                                                                                                                                                               │
│       If you'd like to run the migrations again, you can do so by running 'npx storybook@next automigrate'                                                    │
│                                                                                                                                                               │
│   The automigrations try to migrate common patterns in your project, but might not contain everything needed to migrate to the latest version of Storybook.   │
│                                                                                                                                                               │
│   Please check the changelog and migration guide for manual migrations and more information: https://storybook.js.org/migration-guides/7.0                    │
│   And reach out on Discord if you need help: https://discord.gg/storybook                                                                                     │
│                                                                                                                                                               │
╰───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╯

I run yarn to ensure dependencies are truly installed

(main)⚡ % yarn                                                                                                                                                                                                                              ~/Projects/Stroybook/repros/repro-storybook-21553
yarn install v1.22.19
[1/4] 🔍  Resolving packages...
success Already up-to-date.
✨  Done in 0.17s.

Now I try and run storybook

(main)⚡ % yarn storybook                                                                                                                                                                                                                    ~/Projects/Stroybook/repros/repro-storybook-21553
yarn run v1.22.19
$ storybook dev
@storybook/cli v7.0.0-rc.8

✖ Port NaN is not available. Would you like to run Storybook on port 51221 instead? … yes
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Confusing... I decide to check the package.json file for something weird, I cannot find it, it's all normal

I try to run again

(main)⚡ [1] % yarn storybook                                                                                                                                                                                                                ~/Projects/Stroybook/repros/repro-storybook-21553
yarn run v1.22.19
$ storybook dev
@storybook/cli v7.0.0-rc.8

✔ Port NaN is not available. Would you like to run Storybook on port 51224 instead? … yes

WARN The "@storybook/addon-mdx-gfm" addon is meant as a migration assistant for Storybook 7.0; and will likely be removed in a future version.
WARN It's recommended you read this document:
WARN https://storybook.js.org/docs/7.0/react/writing-docs/mdx#lack-of-github-flavored-markdown-gfm
WARN 
WARN Once you've made the necessary changes, you can remove the addon from your package.json and storybook config.
info => Starting manager..
WARN No story files found for the specified pattern: src/**/*.mdx
╭─────────────────────────────────────────────────────╮
│                                                     │
│   Storybook 7.0.0-rc.8 for react-vite started       │
│   105 ms for manager and 2.82 s for preview         │
│                                                     │
│    Local:            http://localhost:51224/        │
│    On your network:  http://192.168.87.25:51224/    │
│                                                     │
╰─────────────────────────────────────────────────────╯
^C%

This time I just accept the random port, and it opened up.

ndelangen commented 1 year ago

I think I addressed the port bug in a PR.. but the upgrade command only doing half of the work, I suspect, is a bug. @yannbf would you have any idea where to start debugging that?

shilman commented 1 year ago

Jeepers creepers!! I just released https://github.com/storybookjs/storybook/releases/tag/v7.0.0-rc.9 containing PR #21785 that references this issue. Upgrade today to the @next NPM tag to try it out!

npx sb@next upgrade --prerelease
ndelangen commented 1 year ago

@yannbf @shilman my PR only addressed the port problem.