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.08k stars 9.25k forks source link

Storybook does not work when "react" is version 17 #14807

Closed exapsy closed 3 years ago

exapsy commented 3 years ago

Describe the bug When react is version 17.0.2 storybook does not seem to work. Blank white page, and it throws a console error "Error undefined" errors which lead to pretty much nonsensical places inside the bundle and they claim that the root of the problem is LocationProvider. No storybook server errors whatsoever, just storybook frontend errors which dont really make much sense (error undefined as I said).

But when I downgrade react to 16.9, it all suddenly works. Of course I assume this is a peer dependency is issue. Could this somehow be solved?

To Reproduce

Use React 17.0.2 with the set of dependencies described below

System


Environment Info:
  System:
    OS: Linux 5.10 Manjaro Linux
    CPU: (12) x64 AMD Ryzen 5 3600 6-Core Processor
  Binaries:
    Node: 14.13.1 - ~/.nvm/versions/node/v14.13.1/bin/node
    Yarn: 1.22.10 - ~/.nvm/versions/node/v14.13.1/bin/yarn
    npm: 6.14.8 - ~/.nvm/versions/node/v14.13.1/bin/npm
  Browsers:
    Firefox: 88.0
  npmPackages:
    @storybook/addon-actions: ^6.3.0-alpha.19 => 6.3.0-alpha.19
    @storybook/addon-essentials: ^6.3.0-alpha.19 => 6.3.0-alpha.19
    @storybook/addon-links: ^6.3.0-alpha.19 => 6.3.0-alpha.19
    @storybook/node-logger: ^6.3.0-alpha.19 => 6.3.0-alpha.19
    @storybook/preset-create-react-app: ^3.1.7 => 3.1.7
    @storybook/react: ^6.3.0-alpha.19 => 6.3.0-alpha.19

Additional context

So it's deeply related to yarn.lock, which drives me to no conclusion but this being a peer dependency issue.

To be specific, react being version 17.0.2 or 17.* is not the issue alone.

  1. You deleting yarn.lock and node_modules and re-installing the node modules with yarn, reproduces the issue again.
  2. Once you reproduce the issue (blank page that is with console errors) run yarn upgrade react@16.9 and now storybook is working.
  3. Now upgrade react with yarn upgrade react@17.0.2 and it also makes storybook work.
  4. But delete yarn.lock and node_modules rm -rf ./yarn.lock ./node_modules, reinstall them with yarn and it now doesn't work again.

Which probably means, React 17.0.2 or React 17 in general uses an upgraded dependency if cleanly reinstalled that storybook is not compatible with. Or I'm not sure what other conclusion to draw from here.

Edit:

Okay so extra details. React 17.^ despite not displaying a blank page after you've upgraded it from React 16.^, still has errors in Docs. Specifically:

Upgrading from React 16 to React 17

But downgrading again to React 16 makes Storybook work again.

Edit 2:

I saw that React 17 does a breaking change with the new JSX Transform.

https://reactjs.org/blog/2020/10/20/react-v17.html

Add react/jsx-runtime and react/jsx-dev-runtime for the new JSX transform.

Which dependency name react/jsx-runtime also appeared sometimes in the logs randomly during my error messages when running yarn storybook. This error happened when I upgraded to React 17 before running rm -rf ./node_modules ./yarn.lock

image

So the issue might be because of the new JSX transform React uses.

charkour commented 3 years ago

Can confirm. Here is my error when using React 17.0.2 (note that it works with React 17.0.1).

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! Found: react@17.0.2
npm ERR! node_modules/react
npm ERR!   dev react@"17.0.2" from the root project
npm ERR!   peer react@"^16.13.1 || ^17.0.0" from @mdx-js/react@1.6.22
npm ERR!   node_modules/@mdx-js/react
npm ERR!     @mdx-js/react@"1.6.22" from @mdx-js/loader@1.6.22
npm ERR!     node_modules/@mdx-js/loader
npm ERR!       @mdx-js/loader@"^1.6.22" from @storybook/addon-docs@6.2.9
npm ERR!       node_modules/@storybook/addon-essentials/node_modules/@storybook/addon-docs
npm ERR!         @storybook/addon-docs@"6.2.9" from @storybook/addon-essentials@6.2.9
npm ERR!         node_modules/@storybook/addon-essentials
npm ERR!     @mdx-js/react@"^1.6.22" from @storybook/addon-docs@6.2.9
npm ERR!     node_modules/@storybook/addon-essentials/node_modules/@storybook/addon-docs
npm ERR!       @storybook/addon-docs@"6.2.9" from @storybook/addon-essentials@6.2.9
npm ERR!       node_modules/@storybook/addon-essentials
npm ERR!         dev @storybook/addon-essentials@"6.2.9" from the root project
npm ERR!   44 more (@storybook/addon-actions, ...)
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react@"15.x || 16.x || 16.4.0-alpha.0911da3" from @reach/router@1.3.4
npm ERR! node_modules/@reach/router
npm ERR!   @reach/router@"^1.2.1" from @storybook/api@5.3.21
npm ERR!   node_modules/@storybook/addon-info/node_modules/@storybook/api
npm ERR!     @storybook/api@"5.3.21" from @storybook/addons@5.3.21
npm ERR!     node_modules/@storybook/addon-info/node_modules/@storybook/addons
npm ERR!       @storybook/addons@"5.3.21" from @storybook/addon-info@5.3.21
npm ERR!       node_modules/@storybook/addon-info
npm ERR!   @reach/router@"^1.2.1" from @storybook/router@5.3.21
npm ERR!   node_modules/@storybook/addon-info/node_modules/@storybook/router
npm ERR!     @storybook/router@"5.3.21" from @storybook/api@5.3.21
npm ERR!     node_modules/@storybook/addon-info/node_modules/@storybook/api
npm ERR!       @storybook/api@"5.3.21" from @storybook/addons@5.3.21
npm ERR!       node_modules/@storybook/addon-info/node_modules/@storybook/addons
npm ERR!   2 more (@storybook/api, @storybook/router)
charkour commented 3 years ago

One issue is that @react/router has a React peer dep that is less than react 17 which is depended on by @storybook/addons

shilman commented 3 years ago

Do you have a repro repo you can share?

I just tried to repro on a fresh CRA and couldn't. And we have tens of thousands of react users, many of which have been using it with 17.0.2 which was published over a month ago.

exapsy commented 3 years ago

Of course, let me share a codesandbox with you

You'll find a yarn.lock file along with the rest of the project files.

yarn.lock is made by upgrading React to 17.0.2, removing node_modules and yarn.lock and reinstalling the modules.

To reproduce the second issue, where the page is not blank, but the docs have an 'Error Unknown' error, downgrade React to 16.14, test that storybook works well now, and then upgrade to storybook 17.0.2.

shilman commented 3 years ago

@exapsy try:

exapsy commented 3 years ago

Sorry for the late response. @shilman you were absolutely right. react-dom also needs an update or the whole page crashes. Good catch! It worked without removing lockfile or node_modules.

tldr

If you upgraded react, and you have a storybook error, then you probably forgot to upgrade react-dom as well

digitaltopo commented 3 years ago

Sorry to reopen, but not sure if this part was addressed here:

One issue is that @react/router has a React peer dep that is less than react 17 which is depended on by @storybook/addons

I have storybook setup in the root of a NPM 7 monorepo, with React deps to both "react": "^17.0.2" and "react-dom": "^17.0.2", and storybook versions are: 

"@storybook/addon-actions": "^6.2.9",
"@storybook/addon-backgrounds": "^6.2.9",
"@storybook/addon-essentials": "^6.2.9",
"@storybook/addon-links": "^6.2.9",
"@storybook/addons": "^6.2.9",
"@storybook/react": "^6.2.9",
"@storybook/theming": "^6.2.9",

Seeing this error when running npm install:

code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! Found: react@17.0.2
npm ERR! node_modules/react
npm ERR!   react@"^17.0.2" from the root project
npm ERR!   peer react@"^16.8.0 || ^17.0.0" from @material-ui/core@4.11.4
npm ERR!   node_modules/@material-ui/core
npm ERR!     @material-ui/core@"^4.11.4" from the root project
npm ERR!     peer @material-ui/core@"^4.11.4" from @myscope/my-package-2@1.0.1
npm ERR!     packages/my-package-2
npm ERR!     2 more (@myscope/my-package-1, @material-ui/icons)
npm ERR!   29 more (@myscope/my-package-2, @myscope/my-package-1, ...)
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react@"15.x || 16.x || 16.4.0-alpha.0911da3" from @reach/router@1.3.4
npm ERR! node_modules/@storybook/api/node_modules/@reach/router
npm ERR!   @reach/router@"^1.3.4" from @storybook/api@6.2.9
npm ERR!   node_modules/@storybook/api
npm ERR!     @storybook/api@"6.2.9" from @storybook/addon-actions@6.2.9
npm ERR!     node_modules/@storybook/addon-actions
npm ERR!       dev @storybook/addon-actions@"^6.2.9" from the root project
npm ERR!       1 more (@storybook/addon-essentials)
npm ERR!     8 more (@storybook/addon-backgrounds, ...)
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

Have tried deleting package-lock.json file and node_modules folder for a fresh install. The only way I've gotten around this is to use --legacy-peer-deps and --force. Is there any news on the upstream dependency with @reach/router in @storybook/addons?

JoshuaToenyes commented 3 years ago

I can confirm @digitaltopo's comment. I have the same set of dependencies and see the same error result when running npm install.

I my case, running npm install --force resolved the issue (without --legacy-peer-deps).

I think this issue should be reopened.

EDIT: I am not using a monorepo ā€” just a simple single package repo, in case it matters.

huchim commented 3 years ago

I have the same problem:

package.json:

{
  "name": "repro",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "react": "^17.0.2"
  }
}

When i try t npm i -D @storybook/addon-actions throws the same error:

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! Found: react@17.0.2
npm ERR! node_modules/react
npm ERR!   dev react@"^17.0.2" from the root project
npm ERR!   peerOptional react@"^16.8.0 || ^17.0.0" from @storybook/addon-actions@6.2.9
npm ERR!   node_modules/@storybook/addon-actions
npm ERR!     dev @storybook/addon-actions@"*" from the root project
npm ERR!   8 more (@storybook/addons, react-dom, @storybook/api, ...)
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react@"15.x || 16.x || 16.4.0-alpha.0911da3" from @reach/router@1.3.4
npm ERR! node_modules/@storybook/api/node_modules/@reach/router
npm ERR!   @reach/router@"^1.3.4" from @storybook/api@6.2.9
npm ERR!   node_modules/@storybook/api
npm ERR!     @storybook/api@"6.2.9" from @storybook/addon-actions@6.2.9
npm ERR!     node_modules/@storybook/addon-actions
npm ERR!       dev @storybook/addon-actions@"*" from the root project
npm ERR!     1 more (@storybook/addons)
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 
npm ERR! See /home/huchim/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/huchim/.npm/_logs/2021-06-09T20_32_06_389Z-debug.log

šŸ¤” mmm... https://github.com/reach/router/issues/429

JoshuaToenyes commented 3 years ago

@huchim ā€“ Seems like this is the tracking issue now https://github.com/storybookjs/storybook/issues/14619, which is currently in the v6.4 milestone. Current workaround is using npm install --force.

huchim commented 3 years ago

Thanks @JoshuaToenyes ... I'll be patiently waiting for the next release... :)

pmunin commented 3 years ago

It's almost September 2021, the issue is still there. Can someone reopen it please so it does not get lost?

Vldkvll commented 2 years ago

the middle of October 2021, the same shit

shilman commented 2 years ago

@pmunin the issue to track is #14619