search

storybookjs / storybook

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

[Bug]: Upgrade to 7 not working (no packages changed) #23385

Open moritz-kaiser-metro opened 1 year ago

moritz-kaiser-metro commented 1 year ago

Describe the bug

I tried upgrading to 7 and ran the command npx storybook@latest upgrade.

Afterwards only .storybook/main.js changed and nothing else.

(base) moritzkaiser@Moritzs-MacBook-Pro mde-components % npx storybook@latest upgrade
 • Checking for latest versions of '@storybook/*' packagesinfo ,,/bin/sh: -c: line 0: syntax error near unexpected token `('
info /bin/sh: -c: line 0: `npx npm-check-updates@latest /storybook/ --upgrade --target latest --reject /(preset-create-react-app|@nrwl/storybook|@nx/storybook)/'
info 
info ,,/bin/sh: -c: line 0: syntax error near unexpected token `('
info /bin/sh: -c: line 0: `npx npm-check-updates@latest sb --upgrade --target latest --reject /(preset-create-react-app|@nrwl/storybook|@nx/storybook)/'
info 
 • Installing upgrades • Preparing to install dependencies. ✓

up to date, audited 3154 packages in 6s

298 packages are looking for funding
  run `npm fund` for details

133 vulnerabilities (1 low, 91 moderate, 35 high, 6 critical)

To address issues that do not require attention, run:
  npm audit fix

To address all issues possible (including breaking changes), run:
  npm audit fix --force

Some issues need review, and may require choosing
a different dependency.

Run `npm audit` for details.
. ✓
🔎 checking possible migrations..

🔎 found a 'mdx1to2' migration:
╭ Automigration detected ──────────────────────────────────────────────────────────────────────────────────────────╮
│                                                                                                                  │
│   We've found 9 '.stories.mdx' files in your project.                                                            │
│                                                                                                                  │
│   Storybook has upgraded to MDX2 (https://mdxjs.com/blog/v2/), which contains breaking changes from MDX1.        │
│   We can try to automatically upgrade your MDX files to MDX2 format using some common patterns.                  │
│                                                                                                                  │
│   After this install completes, and before you start Storybook, we strongly recommend reading the MDX2 section   │
│   of the 7.0 migration guide. It contains useful tools for detecting and fixing any remaining issues.            │
│                                                                                                                  │
│   https://storybook.js.org/migration-guides/7.0                                                                  │
│                                                                                                                  │
╰──────────────────────────────────────────────────────────────────────────────────────────────────────────────────╯
✔ Do you want to run the 'mdx1to2' migration on your project? … yes
🆗 Unmodified GettingStarted.stories.mdx
🆗 Unmodified Idam.stories.mdx
🆗 Unmodified General.stories.mdx
🆗 Unmodified Search.stories.mdx
🆗 Unmodified Team.stories.mdx
🆗 Unmodified ChangeLog.stories.mdx
🆗 Unmodified General.stories.mdx
🆗 Unmodified AlertContextProvider.stories.mdx
🆗 Unmodified Ceres.stories.mdx
✅ ran mdx1to2 migration

🔎 found a 'autodocsTrue' migration:
╭ Automigration detected ────────────────────────────────────────────────────────────────────────────╮
│                                                                                                    │
│   We've changed the configuration of autodocs (previous docsPage), so now the value:               │
│     - docs.autodocs: true -- means automatically create docs for every CSF file                    │
│     - docs.autodocs: 'tag' -- means only create autodocs for CSF files with the 'autodocs' tag     │
│     - docs.autodocs: false -- means never create autodocs                                          │
│                                                                                                    │
│   Based on your prior configuration,  we can set the `docs.autodocs` to keep your old behaviour:   │
│                                                                                                    │
│   docs: { autodocs: true }                                                                         │
│                                                                                                    │
│   More info: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#autodocs-changes      │
│                                                                                                    │
╰────────────────────────────────────────────────────────────────────────────────────────────────────╯
✔ Do you want to run the 'autodocsTrue' migration on your project? … yes
✅ Setting 'docs.autodocs' to true in main.js
✅ ran autodocsTrue migration

╭ Migration check ran successfully ─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╮
│                                                                                                                                                               │
│   Successful migrations:                                                                                                                                      │
│                                                                                                                                                               │
│   mdx1to2, autodocsTrue                                                                                                                                       │
│                                                                                                                                                               │
│   ─────────────────────────────────────────────────                                                                                                           │
│                                                                                                                                                               │
│   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                                                                                     │
│                                                                                                                                                               │
╰───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╯

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

To Reproduce

No response

System

Environment Info:

  System:
    OS: macOS 13.4.1
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
  Binaries:
    Node: 16.14.2 - ~/.nvm/versions/node/v16.14.2/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v16.14.2/bin/yarn
    npm: 8.5.0 - ~/.nvm/versions/node/v16.14.2/bin/npm
  Browsers:
    Chrome: 114.0.5735.198
    Safari: 16.5.1
  npmPackages:
    @storybook/addon-actions: ^6.5.14 => 6.5.14 
    @storybook/addon-essentials: ^6.5.14 => 6.5.14 
    @storybook/addon-links: ^6.5.14 => 6.5.14 
    @storybook/addon-storysource: ^6.5.14 => 6.5.14 
    @storybook/react: ^6.5.14 => 6.5.14

Additional context

No response

valentinpalkovic commented 1 year ago

Hi @moritz-kaiser-metro

Is your project publicly available that we can take a look?

moritz-kaiser-metro commented 1 year ago

Hey @valentinpalkovic

Unfortunately not.

This is .storybook/main.js now. What changed is that docs is added.

module.exports = {
  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: ['@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-storysource', 'storybook-css-modules-preset'],
  refs: {
    'mde-formik': {
      title: 'mde-formik',
      url: 'https://app.metro.de/mde-formik/',
      expanded: false // optional, true by default
    }
  },
  docs: {
    autodocs: true
  }
};
moritz-kaiser-metro commented 1 year ago

This is the package.json:

{
  "name": "@metro-mde/mde-components",
  "version": "9.4.1",
  "description": "Made with create-react-library",
  "author": "https://github.com/moritz-kaiser-metro",
  "license": "MIT",
  "repository": "https://github.com/metro-digital-inner-source/mde-components",
  "main": "dist/index.js",
  "module": "dist/index.modern.js",
  "source": "src/index.tsx",
  "engines": {
    "node": ">=10"
  },
  "scripts": {
    "test": "react-scripts test --env=jsdom",
    "build": "rollup -c",
    "start": "rollup -c -w",
    "prepublishOnly": "npm run build",
    "storybook": "start-storybook -p 6006",
    "build-storybook": "build-storybook",
    "start-storybook": "node server.js"
  },
  "peerDependencies": {
    "react": "^16.0.0 || ^17.0.0 || ^18.0.0",
    "styled-components": "^5.3.3"
  },
  "devDependencies": {
    "@babel/core": "^7.17.5",
    "@rollup/plugin-commonjs": "^24.0.1",
    "@rollup/plugin-node-resolve": "^15.0.1",
    "@storybook/addon-actions": "^6.5.14",
    "@storybook/addon-essentials": "^6.5.14",
    "@storybook/addon-links": "^6.5.14",
    "@storybook/addon-storysource": "^6.5.14",
    "@storybook/react": "^6.5.14",
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.5.0",
    "@testing-library/user-event": "^7.2.1",
    "@types/jest": "^25.1.4",
    "@types/node": "^12.20.46",
    "@types/react": "^16.14.23",
    "@types/react-dom": "^16.9.14",
    "@types/styled-components": "^5.1.23",
    "@types/throttle-debounce": "^2.1.0",
    "@typescript-eslint/eslint-plugin": "^2.26.0",
    "@typescript-eslint/parser": "^2.26.0",
    "babel-eslint": "^10.0.3",
    "babel-loader": "^8.2.3",
    "cross-env": "^7.0.2",
    "eslint": "^6.8.0",
    "eslint-config-prettier": "^6.7.0",
    "eslint-config-standard": "^14.1.0",
    "eslint-config-standard-react": "^9.2.0",
    "eslint-plugin-import": "^2.25.4",
    "eslint-plugin-node": "^11.0.0",
    "eslint-plugin-prettier": "^3.4.1",
    "eslint-plugin-promise": "^4.2.1",
    "eslint-plugin-react": "^7.29.2",
    "eslint-plugin-standard": "^4.0.1",
    "gh-pages": "^2.2.0",
    "microbundle-crl": "^0.13.10",
    "npm-run-all": "^4.1.5",
    "prettier": "^2.5.1",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-scripts": "^3.4.1",
    "rollup": "^2.79.1",
    "rollup-plugin-json": "^4.0.0",
    "rollup-plugin-postcss": "^3.1.8",
    "rollup-plugin-postcss-modules": "^2.0.2",
    "rollup-plugin-typescript2": "^0.31.2",
    "storybook-css-modules-preset": "^1.1.1",
    "styled-components": "^5.3.6",
    "typescript": "^5.1.6"
  },
  "files": [
    "dist"
  ],
  "standard": {
    "ignore": [
      "node_modules/",
      "build/"
    ]
  },
  "dependencies": {
    "@metro-mde/mde-ceres-types": "^1.0.15",
    "@metro-mde/mde-shared-customer-search-types": "^1.1.0",
    "@metro-mde/mdesearch-types": "^0.9.4",
    "@metro-ui/core": "^8.18.1",
    "@metro-ui/metro-icons-react": "^0.0.20",
    "@metro-ui/tokens": "^4.8.0",
    "axios": "^0.21.4",
    "dayjs": "^1.11.7",
    "express": "^4.18.2",
    "jwt-decode": "^3.1.2",
    "path": "^0.12.7",
    "prop-types": "^15.8.1",
    "react-intersection-observer": "^8.33.1",
    "throttle-debounce": "^5.0.0",
    "use-debounce": "^7.0.1"
  }
}
brandon-selfbook commented 1 year ago

Having the same experience in a private repo here.

node@16.15.0
yarn@3.6.1

Ran this command:

npx storybook@latest upgrade

Output:

➜  self git:(alfa-4532) ✗ npx storybook@latest upgrade
 • Checking for latest versions of '@storybook/*' packagesinfo ,,/bin/sh: -c: line 0: syntax error near unexpected token `('
info /bin/sh: -c: line 0: `npx npm-check-updates@latest /storybook/ --upgrade --target latest --reject /(preset-create-react-app|@nrwl/storybook|@nx/storybook)/'
info
info ,,/bin/sh: -c: line 0: syntax error near unexpected token `('
info /bin/sh: -c: line 0: `npx npm-check-updates@latest sb --upgrade --target latest --reject /(preset-create-react-app|@nrwl/storybook|@nx/storybook)/'
info
 • Installing upgrades • Preparing to install dependencies. ✓

 • Installing dependencies➤ YN0000: ┌ Resolution step
➤ YN0002: │ @self/self-ui-kit@workspace:. doesn't provide @babel/core (pbdac6), requested by babel-loader
➤ YN0002: │ @self/self-ui-kit@workspace:. doesn't provide @babel/core (p8307a), requested by @babel/cli
➤ YN0002: │ @self/self-ui-kit@workspace:. doesn't provide @babel/core (p5577d), requested by @babel/register
➤ YN0002: │ @self/self-ui-kit@workspace:. doesn't provide @babel/core (pa5620), requested by @emotion/babel-plugin-jsx-pragmatic
➤ YN0002: │ @self/self-ui-kit@workspace:. doesn't provide @babel/core (p5896a), requested by @storybook/addon-essentials
➤ YN0002: │ @self/self-ui-kit@workspace:. doesn't provide @babel/core (p12dd5), requested by @storybook/preset-create-react-app
➤ YN0002: │ @self/self-ui-kit@workspace:. doesn't provide @babel/core (pc97c9), requested by babel-plugin-inline-react-svg
➤ YN0002: │ @self/self-ui-kit@workspace:. doesn't provide @testing-library/dom (p781da), requested by @testing-library/user-event
➤ YN0060: │ @self/self-ui-kit@workspace:. provides autoprefixer (p05138) with version 9.8.8, which doesn't satisfy what tailwindcss requests
➤ YN0002: │ @self/self-ui-kit@workspace:. doesn't provide prop-types (p532ea), requested by react-loading
➤ YN0002: │ @self/self-ui-kit@workspace:. doesn't provide require-from-string (p9f8eb), requested by @storybook/react
➤ YN0002: │ @self/self-ui-kit@workspace:. doesn't provide webpack (pa5c91), requested by babel-loader
➤ YN0002: │ @storybook/addon-docs@npm:6.5.16 [d44c9] doesn't provide @babel/core (pa27a7), requested by @babel/preset-env
➤ YN0002: │ @storybook/addon-docs@npm:6.5.16 [d44c9] doesn't provide @babel/core (p241f0), requested by @babel/plugin-transform-react-jsx
➤ YN0002: │ @storybook/addon-docs@npm:6.5.16 [d44c9] doesn't provide @babel/core (p4cc83), requested by babel-loader
➤ YN0002: │ @storybook/addon-docs@npm:6.5.16 [d44c9] doesn't provide webpack (pa80f2), requested by babel-loader
➤ YN0002: │ @storybook/docs-tools@npm:6.5.16 doesn't provide react (p9b542), requested by @storybook/store
➤ YN0002: │ @storybook/docs-tools@npm:6.5.16 doesn't provide react-dom (pc910b), requested by @storybook/store
➤ YN0002: │ @storybook/mdx1-csf@npm:0.0.1 doesn't provide @babel/core (pc8710), requested by @babel/preset-env
➤ YN0002: │ @storybook/preset-create-react-app@npm:3.2.0 [6e7c1] doesn't provide react-refresh (p0e16c), requested by @pmmmwh/react-refresh-webpack-plugin
➤ YN0002: │ @storybook/preset-create-react-app@npm:3.2.0 [6e7c1] doesn't provide typescript (p8573c), requested by react-docgen-typescript-plugin
➤ YN0002: │ @storybook/preset-create-react-app@npm:3.2.0 [6e7c1] doesn't provide webpack (p7e839), requested by @pmmmwh/react-refresh-webpack-plugin
➤ YN0002: │ @storybook/preset-create-react-app@npm:3.2.0 [6e7c1] doesn't provide webpack (p973ed), requested by react-docgen-typescript-plugin
➤ YN0002: │ @storybook/telemetry@npm:6.5.16 doesn't provide react (p48f29), requested by @storybook/core-common
➤ YN0002: │ @storybook/telemetry@npm:6.5.16 doesn't provide react-dom (p479a1), requested by @storybook/core-common
➤ YN0002: │ reakit-warning@npm:0.6.2 [7f321] doesn't provide react-dom (p3481b), requested by reakit-utils
➤ YN0000: │ Some peer dependencies are incorrectly met; run yarn explain peer-requirements <hash> for details, where <hash> is the six-letter p-prefixed code
➤ YN0000: └ Completed in 0s 253ms
➤ YN0000: ┌ Fetch step
➤ YN0000: └ Completed in 0s 389ms
➤ YN0000: ┌ Link step
➤ YN0000: └ Completed in 0s 579ms
➤ YN0000: Done with warnings in 1s 468ms
. ✓
🔎 checking possible migrations..

╭ No migrations were applicable to your project ────────────────────────────────────────────────────────────────────────────────────────────────────────────────╮
│                                                                                                                                                               │
│   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                                                                                     │
│                                                                                                                                                               │
│   ─────────────────────────────────────────────────                                                                                                           │
│                                                                                                                                                               │
│   Attention: The following dependencies are duplicated which might cause unexpected behavior:                                                                 │
│                                                                                                                                                               │
│   @storybook/core-common:                                                                                                                                     │
│   6.5.16, 7.0.27                                                                                                                                              │
│                                                                                                                                                               │
│   @storybook/core-server:                                                                                                                                     │
│   6.5.16, 7.0.27                                                                                                                                              │
│                                                                                                                                                               │
│   @storybook/csf-tools:                                                                                                                                       │
│   6.5.16, 7.0.27                                                                                                                                              │
│                                                                                                                                                               │
│   @storybook/node-logger:                                                                                                                                     │
│   6.5.16, 7.0.27                                                                                                                                              │
│                                                                                                                                                               │
│   @storybook/telemetry:                                                                                                                                       │
│   6.5.16, 7.0.27                                                                                                                                              │
│                                                                                                                                                               │
│   You can find more information for a given dependency by running yarn why <package-name>                                                                     │
│                                                                                                                                                               │
╰───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╯

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
Nishchit14 commented 1 year ago

@valentinpalkovic

firecamp is an open source project. you can check the above issue there. let me know if I can help you anyway.