markuslangl
commented
3 years ago Hi, I can confirm this issue with a brand-new installation of Storybook 6.4.0-beta.22 (with webpack5 builder) and yarn 3.1.
Apparently this is caused by missing peer dependencies which yarn 1 accepts, but yarn 2+ not.
Steps to reproduce
I can reproduce this issue in a clean project by following these steps by creating an empty Vue 3 project with yarn workspaces:
# Create test directories
mkdir -p storybook-test/test && cd storybook-test
# Set yarn version to the latest 3.1
yarn set version berry
# Add test workspace to package.json
echo '{
"workspaces": [
"test"
],
"packageManager": "yarn@3.1.0"
}' > package.json
# Add latest Vue.js 3 to the project
yarn add -D vue@next
# Install Storybook 6.4 with Webpack 5 builder
npx sb@next init --builder webpack5Now, when running yarn storybook, I get the same error:
info @storybook/vue3 v6.4.0-beta.22
info
info => Loading presets
WARN Failed to load preset: "$PWD/storybook-test/.yarn/__virtual__/@storybook-manager-webpack5-virtual-bb66779194/0/cache/@storybook-manager-webpack5-npm-6.4.0-beta.22-4f6bd96784-3a7a473554.zip/node_modules/@storybook/manager-webpack5/dist/cjs/presets/manager-preset.js"
ERR! Error: @storybook/ui tried to access react (a peer dependency) but it isn't provided by your application; this makes the require call ambiguous and unsound.
ERR!
ERR! Required package: react (via "react/package.json")
ERR! Required by: @storybook/ui@virtual:58b6eb0975e34d0139019faeccbfdac2f2dee6d9d51cca86b07b711ec36ff1fedd3f11ce1ba5ee5b122d630e84a3670034e722379d6aaa1237ea656bdb5020c5#npm:6.4.0-beta.22 (via $PWD/storybook-test/.yarn/__virtual__/@storybook-ui-virtual-f42984901e/0/cache/@storybook-ui-npm-6.4.0-beta.22-c73bc3c321-f0db16d19d.zip/node_modules/@storybook/ui/)
ERR! Ancestor breaking the chain: root-workspace-0b6124@workspace:.
ERR!
ERR!
ERR! Require stack:
ERR! - $PWD/storybook-test/.yarn/__virtual__/@storybook-ui-virtual-f42984901e/0/cache/@storybook-ui-npm-6.4.0-beta.22-c73bc3c321-f0db16d19d.zip/node_modules/@storybook/ui/noop.js
ERR! at Function.external_module_.Module._resolveFilename ($PWD/storybook-test/.pnp.cjs:28587:55)
ERR! at resolveFileName ($PWD/storybook-test/.yarn/cache/resolve-from-npm-5.0.0-15c9db4d33-4ceeb9113e.zip/node_modules/resolve-from/index.js:29:39)
ERR! at resolveFrom ($PWD/storybook-test/.yarn/cache/resolve-from-npm-5.0.0-15c9db4d33-4ceeb9113e.zip/node_modules/resolve-from/index.js:43:9)
ERR! at module.exports ($PWD/storybook-test/.yarn/cache/resolve-from-npm-5.0.0-15c9db4d33-4ceeb9113e.zip/node_modules/resolve-from/index.js:46:47)
ERR! at Object.<anonymous> ($PWD/storybook-test/.yarn/__virtual__/@storybook-ui-virtual-f42984901e/0/cache/@storybook-ui-npm-6.4.0-beta.22-c73bc3c321-f0db16d19d.zip/node_modules/@storybook/ui/paths.js:17:18)
ERR! at Module._compile (internal/modules/cjs/loader.js:1063:30)
ERR! at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
ERR! at Module.load (internal/modules/cjs/loader.js:928:32)
ERR! at Function.external_module_.Module._load ($PWD/storybook-test/.pnp.cjs:28436:14)
ERR! at Module.require (internal/modules/cjs/loader.js:952:19)
ERR! at require (internal/modules/cjs/helpers.js:88:18)
ERR! at Object.<anonymous> ($PWD/storybook-test/.yarn/__virtual__/@storybook-manager-webpack5-virtual-bb66779194/0/cache/@storybook-manager-webpack5-npm-6.4.0-beta.22-4f6bd96784-3a7a473554.zip/node_modules/@storybook/manager-webpack5/dist/cjs/presets/manager-preset.js:61:38)
ERR! at Module._compile (internal/modules/cjs/loader.js:1063:30)
ERR! at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
ERR! at Module.load (internal/modules/cjs/loader.js:928:32)
ERR! at Function.external_module_.Module._load ($PWD/storybook-test/.pnp.cjs:28436:14)
ERR! Error: @storybook/ui tried to access react (a peer dependency) but it isn't provided by your application; this makes the require call ambiguous and unsound.
<...>
WARN Broken build, fix the error above.
WARN You may need to refresh the browser.(Please note, that I've replaced the full path to the storybook-test directory with $PWD).
Workaround
I can run yarn storybook again by following these steps:
# Install babel peer dependencies mentioned in the .babelrc
# The list of dependencies has been extracted from the file generated by
# npx sb@next babelrc
yarn add -D \
@babel/preset-env \
@babel/plugin-transform-shorthand-properties \
@babel/plugin-transform-block-scoping \
@babel/plugin-proposal-decorators \
@babel/plugin-proposal-class-properties \
@babel/plugin-proposal-private-methods \
@babel/plugin-proposal-export-default-from \
@babel/plugin-syntax-dynamic-import \
@babel/plugin-proposal-object-rest-spread \
@babel/plugin-transform-classes \
@babel/plugin-transform-arrow-functions \
@babel/plugin-transform-parameters \
@babel/plugin-transform-destructuring \
@babel/plugin-transform-spread \
@babel/plugin-transform-for-of \
babel-plugin-macros \
@babel/plugin-proposal-optional-chaining \
@babel/plugin-proposal-nullish-coalescing-operator \
babel-plugin-polyfill-corejs3 \
core-js
# Add missing peer dependencies
echo 'packageExtensions:
"@mdx-js/loader@*":
dependencies:
"react": "*"
"@mdx-js/react@*":
dependencies:
"react": "*"
"@storybook/ui@*":
dependencies:
"react": "*"
"react-dom": "*"
"@storybook/builder-webpack5@*":
dependencies:
"react": "*"
"react-dom": "*"
"@storybook/manager-webpack5@*":
dependencies:
"react": "*"
"react-dom": "*"' > .yarnrc.yml
# Updating yarn with changes from .yarnrc.yml
yarnNow running yarn storybook works again, but:
- The browser doesn't open the local version automatically
- A few error messages appear in the console during the start:
info @storybook/vue3 v6.4.0-beta.22 info ✔ Port 6006 is not available. Would you like to run Storybook on port 6007 instead? … yes
info => Loading presets
info => Using implicit CSS loaders
info => Using default Webpack5 setup
[webpack-dev-middleware] wait until bundle finished
10% building 0/1 entries 0/0 dependencies 0/0 modules(node:296950) [DEP_WEBPACK_COMPILATION_NORMAL_MODULE_LOADER_HOOK] DeprecationWarning: Compilation.hooks.normalModuleLoader was moved to NormalModule.getCompilationHooks(compilation).loader
(Use node --trace-deprecation ... to show where the warning was created)
info => Using prebuilt manager
99% done plugins webpack-hot-middlewarewebpack built preview 97716a8da2eb98af6fec in 16354ms
╭──────────────────────────────────────────────────────╮
│ │
│ Storybook 6.4.0-beta.22 for Vue3 started │
│ 18 s for preview │
│ │
│ Local: http://localhost:6007/ │
│ On your network: http://192.168.229.137:6007/ │
│ │
╰──────────────────────────────────────────────────────╯
(node:296950) UnhandledPromiseRejectionWarning: Error: spawn ENOTDIR
at ChildProcess.spawn (internal/child_process.js:403:11)
at Object.spawn (child_process.js:553:9)
at module.exports ($PWD/storybook-test/.yarn/cache/open-npm-7.4.2-a378c23959-3333900ec0.zip/node_modules/open/index.js:175:34)
at runMicrotasks (--unhandled-rejections=strict (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 4535)
(node:296950) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
99% done plugins webpack-hot-middlewarewebpack built preview 9145ff9133235a7a3bda in 1510ms
(Please note that these messages also appear when Storybook is running a single time on port 6006).
## System details
* OS: Fedora 34
* Node: 14.16.1
* npm: 6.14.12
* yarn: 3.1
shilman
Describe the bug I'm using storybook@vue3 in my project, originally made with npm, and trying to adapt it to yarn2 ("berry"). Current setup runs perfectly with npm, but then I try to launch "start-storybook" with yarn it just fails with following (full log):
To me it seems very odd that vue-oriented version of project has a react as a dependency, without which its jsut cant be launched. Gladle waiting for you assistance.
To Reproduce dependencies part of package.json
webpack.config.js
storybook/main.js
tools/webpackCommon.js
System System: OS: Windows 10 10.0.19043 CPU: (6) x64 Intel(R) Core(TM) i5-9600K CPU @ 3.70GHz Binaries: Node: 14.17.1 - C:\Program Files\nodejs\node.EXE Yarn: 2.4.2 - ~\AppData\Roaming\npm\yarn.CMD npm: 6.14.13 - C:\Program Files\nodejs\npm.CMD Browsers: Edge: Spartan (44.19041.1023.0), Chromium (91.0.864.59)