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.65k stars 9.32k forks source link

[Bug]: Storybook 6.5 not working with yarn pnp (yarn berry) #19764

Open hayeon9826 opened 2 years ago

hayeon9826 commented 2 years ago

Describe the bug

Storybook is not working with yarn pnp. I upgraded my yarn version to yarn berry, and it's not working anymore. (Used to work perfectly on previous yarn version with node modules)

When I try to run storybook

yarn storybook

It gets following errors:

ModuleBuildError: Module build failed (from ./.yarn/__virtual__/babel-loader-virtual-f7388549ba/0/cache/babel-loader-npm-8.3.0-a5239d7ed2-d48bcf9e03.zip/node_modules/babel-loader/lib/index.js):
Error: [BABEL] /Users/hayeon/Desktop/dev/web-frontend-v2/.storybook/preview.js-generated-config-entry.js: Failed to resolve "@babel/runtime" relative to "/Users/hayeon/Desktop/dev/web-frontend-v2/.yarn/__virtual__/next-virtual-42b537a1fa/0/cache/next-npm-12.2.5-8247fb1613-e8fcbd93d7.zip/node_modules/next/dist/compiled/@babel/runtime" (While processing: "/Users/hayeon/Desktop/dev/web-frontend-v2/.yarn/__virtual__/next-virtual-42b537a1fa/0/cache/next-npm-12.2.5-8247fb1613-e8fcbd93d7.zip/node_modules/next/babel.js$6")
    at resolveAbsoluteRuntime (/Users/hayeon/Desktop/dev/web-frontend-v2/.yarn/__virtual__/next-virtual-42b537a1fa/0/cache/next-npm-12.2.5-8247fb1613-e8fcbd93d7.zip/node_modules/next/dist/compiled/babel-packages/packages-bundle.js:223:49932)
    at _default (/Users/hayeon/Desktop/dev/web-frontend-v2/.yarn/__virtual__/next-virtual-42b537a1fa/0/cache/next-npm-12.2.5-8247fb1613-e8fcbd93d7.zip/node_modules/next/dist/compiled/babel-packages/packages-bundle.js:223:49399)
    at /Users/hayeon/Desktop/dev/-web-frontend-v2/.yarn/__virtual__/next-virtual-42b537a1fa/0/cache/next-npm-12.2.5-8247fb1613-e8fcbd93d7.zip/node_modules/next/dist/compiled/babel-packages/packages-bundle.js:223:53086
    at /Users/hayeon/Desktop/dev/web-frontend-v2/.yarn/__virtual__/next-virtual-42b537a1fa/0/cache/next-npm-12.2.5-8247fb1613-e8fcbd93d7.zip/node_modules/next/dist/compiled/babel-packages/packages-bundle.js:140:6174
    at async (/Users/hayeon/Desktop/dev/web-frontend-v2/.yarn/cache/@babel-core-npm-7.20.2-7fb00344fc-98faaaef26.zip/node_modules/@babel/core/lib/gensync-utils/async.js:38:33)
    at async (/Users/hayeon/Desktop/dev/web-frontend-v2/.yarn/cache/gensync-npm-1.0.0-beta.2-224666d72f-a7437e58c6.zip/node_modules/gensync/index.js:186:15)
    at /Users/hayeon/Desktop/dev/web-frontend-v2/.yarn/cache/gensync-npm-1.0.0-beta.2-224666d72f-a7437e58c6.zip/node_modules/gensync/index.js:216:13
    at Generator.next (<anonymous>)
    at /Users/hayeon/Desktop/dev/web-frontend-v2/.yarn/cache/@babel-core-npm-7.20.2-7fb00344fc-98faaaef26.zip/node_modules/@babel/core/lib/config/full.js:184:21
    at Generator.next (<anonymous>)
    at Function.<anonymous> (/Users/hayeon/Desktop/dev/web-frontend-v2/.yarn/cache/@babel-core-npm-7.20.2-7fb00344fc-98faaaef26.zip/node_modules/@babel/core/lib/gensync-utils/async.js:21:3)

...(skip)

    at loadPluginDescriptors (/Users/hayeon/Desktop/dev/web-frontend-v2/.yarn/cache/@babel-core-npm-7.20.2-7fb00344fc-98faaaef26.zip/node_modules/@babel/core/lib/config/full.js:131:33)
    at loadPluginDescriptors.next (<anonymous>)
    at /Users/hayeon/Desktop/dev/web-frontend-v2/.yarn/cache/@babel-core-npm-7.20.2-7fb00344fc-98faaaef26.zip/node_modules/@babel/core/lib/config/full.js:159:21
    at Generator.next (<anonymous>)
    at loadFullConfig (/Users/hayeon/Desktop/dev/web-frontend-v2/.yarn/cache/@babel-core-npm-7.20.2-7fb00344fc-98faaaef26.zip/node_modules/@babel/core/lib/config/full.js:143:5)
    at loadFullConfig.next (<anonymous>)
    at transform (/Users/hayeon/Desktop/dev/web-frontend-v2/.yarn/cache/@babel-core-npm-7.20.2-7fb00344fc-98faaaef26.zip/node_modules/@babel/core/lib/transform.js:20:45)
    at transform.next (<anonymous>)
    at step (/Users/hayeon/Desktop/dev/web-frontend-v2/.yarn/cache/gensync-npm-1.0.0-beta.2-224666d72f-a7437e58c6.zip/node_modules/gensync/index.js:269:25)
    at /Users/hayeon/Desktop/dev/web-frontend-v2/.yarn/cache/gensync-npm-1.0.0-beta.2-224666d72f-a7437e58c6.zip/node_modules/gensync/index.js:273:13
    at async.call.result.err.err (/Users/hayeon/Desktop/dev/web-frontend-v2/.yarn/cache/gensync-npm-1.0.0-beta.2-224666d72f-a7437e58c6.zip/node_modules/gensync/index.js:223:11)
    at /Users/hayeon/Desktop/dev/web-frontend-v2/.yarn/cache/gensync-npm-1.0.0-beta.2-224666d72f-a7437e58c6.zip/node_modules/gensync/index.js:189:28
    at /Users/hayeon/Desktop/dev/web-frontend-v2/.yarn/cache/@babel-core-npm-7.20.2-7fb00344fc-98faaaef26.zip/node_modules/@babel/core/lib/gensync-utils/async.js:72:7
    at /Users/hayeon/Desktop/dev/web-frontend-v2/.yarn/cache/gensync-npm-1.0.0-beta.2-224666d72f-a7437e58c6.zip/node_modules/gensync/index.js:113:33
    at step (/Users/hayeon/Desktop/dev/web-frontend-v2/.yarn/cache/gensync-npm-1.0.0-beta.2-224666d72f-a7437e58c6.zip/node_modules/gensync/index.js:287:14)
    at /Users/hayeon/Desktop/dev/web-frontend-v2/.yarn/cache/gensync-npm-1.0.0-beta.2-224666d72f-a7437e58c6.zip/node_modules/gensync/index.js:273:13
    at async.call.result.err.err (/Users/hayeon/Desktop/dev/web-frontend-v2/.yarn/cache/gensync-npm-1.0.0-beta.2-224666d72f-a7437e58c6.zip/node_modules/gensync/index.js:223:11)
    at processResult (/Users/hayeon/Desktop/dev/finda-web-frontend-v2/.yarn/__virtual__/webpack-virtual-93b610a066/0/cache/webpack-npm-5.74.0-f5b838a00d-320c41369a.zip/node_modules/webpack/lib/NormalModule.js:758:19)
    at /Users/hayeon/Desktop/dev/web-frontend-v2/.yarn/__virtual__/webpack-virtual-93b610a066/0/cache/webpack-npm-5.74.0-f5b838a00d-320c41369a.zip/node_modules/webpack/lib/NormalModule.js:860:5
    at /Users/hayeon/Desktop/dev/web-frontend-v2/.yarn/cache/loader-runner-npm-4.3.0-9ca67df372-a90e00dee9.zip/node_modules/loader-runner/lib/LoaderRunner.js:400:11
    at /Users/hayeon/Desktop/dev/web-frontend-v2/.yarn/cache/loader-runner-npm-4.3.0-9ca67df372-a90e00dee9.zip/node_modules/loader-runner/lib/LoaderRunner.js:252:18
    at context.callback (/Users/hayeon/Desktop/dev/web-frontend-v2/.yarn/cache/loader-runner-npm-4.3.0-9ca67df372-a90e00dee9.zip/node_modules/loader-runner/lib/LoaderRunner.js:124:13)
    at /Users/hayeon/Desktop/dev/web-frontend-v2/.yarn/__virtual__/babel-loader-virtual-f7388549ba/0/cache/babel-loader-npm-8.3.0-a5239d7ed2-d48bcf9e03.zip/node_modules/babel-loader/lib/index.js:44:103

WARN Broken build, fix the error above.
WARN You may need to refresh the browser.

I looked up for the relevant issues and added packageExtensions code on .yarnrc.yml, but still not working (getting the same errors)

packageExtensions:
  "@storybook/core-server@*":
    dependencies:
      "@storybook/manager-webpack5": "*"
  "@storybook/builder-webpack5@*":
    dependencies:
      "react": "16.14.0"
      "react-dom": "16.14.0"
  "@storybook/manager-webpack5@*":
    dependencies:
      "react": "16.14.0"
      "react-dom": "16.14.0"

and my package.json

"scripts": {
    "storybook": "start-storybook -p 6006",
    "build-storybook": "build-storybook"
},
"devDependencies": {
  "@storybook/addon-actions": "^6.5.13",
  "@storybook/addon-docs": "^6.5.13",
  "@storybook/addon-essentials": "^6.5.13",
  "@storybook/addon-interactions": "^6.5.13",
  "@storybook/addon-links": "^6.5.13",
  "@storybook/builder-webpack5": "^6.5.13",
  "@storybook/manager-webpack5": "^6.5.13",
  "@storybook/react": "^6.5.13",
  "@storybook/testing-library": "^0.0.13",
  "eslint-plugin-storybook": "^0.6.7",
}

To Reproduce

I Just followed the storybook document (https://storybook.js.org/docs/react/get-started/install) 

npx storybook init
yarn storybook

System

Environment Info:

  System:
    OS: macOS 12.3
    CPU: (8) arm64 Apple M1
  Binaries:
    Node: 16.17.1 - ~/.nvm/versions/node/v16.17.1/bin/node
    Yarn: 3.2.3 - /opt/homebrew/bin/yarn
    npm: 8.15.0 - ~/.nvm/versions/node/v16.17.1/bin/npm
  Browsers:
    Chrome: 107.0.5304.87
    Safari: 15.4

Additional context

No response

shilman commented 2 years ago

@hayeon9826 what version are you upgrading from?

hayeon9826 commented 2 years ago

@shilman From yarn 1.22.19 to yarn 3.2.3

shilman commented 2 years ago

@hayeon9826 I see. So you were not upgrading from an older version of Storybook that supported pnp. Thanks for clarifying!