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

exapsy · 2021-05-04T21:17:10Z

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.

You deleting yarn.lock and node_modules and re-installing the node modules with yarn, reproduces the issue again.
Once you reproduce the issue (blank page that is with console errors) run yarn upgrade [email protected] and now storybook is working.
Now upgrade react with yarn upgrade [email protected] and it also makes storybook work.
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:

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

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

The text was updated successfully, but these errors were encountered:

charkour · 2021-05-05T01:09:27Z

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: [email protected]
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/[email protected]
npm ERR!   node_modules/@mdx-js/react
npm ERR!     @mdx-js/react@"1.6.22" from @mdx-js/[email protected]
npm ERR!     node_modules/@mdx-js/loader
npm ERR!       @mdx-js/loader@"^1.6.22" from @storybook/[email protected]
npm ERR!       node_modules/@storybook/addon-essentials/node_modules/@storybook/addon-docs
npm ERR!         @storybook/addon-docs@"6.2.9" from @storybook/[email protected]
npm ERR!         node_modules/@storybook/addon-essentials
npm ERR!     @mdx-js/react@"^1.6.22" from @storybook/[email protected]
npm ERR!     node_modules/@storybook/addon-essentials/node_modules/@storybook/addon-docs
npm ERR!       @storybook/addon-docs@"6.2.9" from @storybook/[email protected]
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/[email protected]
npm ERR! node_modules/@reach/router
npm ERR!   @reach/router@"^1.2.1" from @storybook/[email protected]
npm ERR!   node_modules/@storybook/addon-info/node_modules/@storybook/api
npm ERR!     @storybook/api@"5.3.21" from @storybook/[email protected]
npm ERR!     node_modules/@storybook/addon-info/node_modules/@storybook/addons
npm ERR!       @storybook/addons@"5.3.21" from @storybook/[email protected]
npm ERR!       node_modules/@storybook/addon-info
npm ERR!   @reach/router@"^1.2.1" from @storybook/[email protected]
npm ERR!   node_modules/@storybook/addon-info/node_modules/@storybook/router
npm ERR!     @storybook/router@"5.3.21" from @storybook/[email protected]
npm ERR!     node_modules/@storybook/addon-info/node_modules/@storybook/api
npm ERR!       @storybook/api@"5.3.21" from @storybook/[email protected]
npm ERR!       node_modules/@storybook/addon-info/node_modules/@storybook/addons
npm ERR!   2 more (@storybook/api, @storybook/router)

charkour · 2021-05-05T01:19:01Z

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 · 2021-05-05T04:08:19Z

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 · 2021-05-05T10:52:41Z

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 · 2021-05-06T07:05:48Z

@exapsy try:

also upgrading react-dom to 17.0.2
removing your lockfile and node_modules and reinstalling

exapsy · 2021-05-12T08:36:56Z

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 · 2021-05-20T01:08:09Z

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: [email protected]
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/[email protected]
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/[email protected]
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/[email protected]
npm ERR! node_modules/@storybook/api/node_modules/@reach/router
npm ERR!   @reach/router@"^1.3.4" from @storybook/[email protected]
npm ERR!   node_modules/@storybook/api
npm ERR!     @storybook/api@"6.2.9" from @storybook/[email protected]
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 · 2021-05-24T15:49:14Z

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 · 2021-06-09T21:07:59Z

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: [email protected]
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/[email protected]
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/[email protected]
npm ERR! node_modules/@storybook/api/node_modules/@reach/router
npm ERR!   @reach/router@"^1.3.4" from @storybook/[email protected]
npm ERR!   node_modules/@storybook/api
npm ERR!     @storybook/api@"6.2.9" from @storybook/[email protected]
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... reach/router#429

JoshuaToenyes · 2021-06-09T21:20:29Z

@huchim – Seems like this is the tracking issue now #14619, which is currently in the v6.4 milestone. Current workaround is using npm install --force.

huchim · 2021-06-09T21:30:29Z

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

…book incompatibility with react 17 storybookjs/storybook#14807

pmunin · 2021-08-31T03:21:24Z

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

Vldkvll · 2021-10-18T10:53:11Z

the middle of October 2021, the same shit

shilman · 2021-10-18T14:33:46Z

@pmunin the issue to track is #14619

exapsy added bug needs triage labels May 4, 2021

shilman added the react label May 5, 2021

exapsy closed this as completed May 12, 2021

camolezi pushed a commit to camolezi/for-the-record that referenced this issue Jun 28, 2021

Updated dependencies- Need to run --force on npm install due to story…

a02339e

…book incompatibility with react 17 storybookjs/storybook#14807

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

exapsy commented May 4, 2021 •

edited

Loading

charkour commented May 5, 2021

charkour commented May 5, 2021

shilman commented May 5, 2021

exapsy commented May 5, 2021 •

edited

Loading

shilman commented May 6, 2021

exapsy commented May 12, 2021 •

edited

Loading

digitaltopo commented May 20, 2021

JoshuaToenyes commented May 24, 2021 •

edited

Loading

huchim commented Jun 9, 2021 •

edited

Loading

JoshuaToenyes commented Jun 9, 2021

huchim commented Jun 9, 2021

pmunin commented Aug 31, 2021

Vldkvll commented Oct 18, 2021

shilman commented Oct 18, 2021

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

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

Comments

exapsy commented May 4, 2021 • edited Loading

Edit:

Edit 2:

charkour commented May 5, 2021

charkour commented May 5, 2021

shilman commented May 5, 2021

exapsy commented May 5, 2021 • edited Loading

shilman commented May 6, 2021

exapsy commented May 12, 2021 • edited Loading

tldr

digitaltopo commented May 20, 2021

JoshuaToenyes commented May 24, 2021 • edited Loading

huchim commented Jun 9, 2021 • edited Loading

JoshuaToenyes commented Jun 9, 2021

huchim commented Jun 9, 2021

pmunin commented Aug 31, 2021

Vldkvll commented Oct 18, 2021

shilman commented Oct 18, 2021

exapsy commented May 4, 2021 •

edited

Loading

exapsy commented May 5, 2021 •

edited

Loading

exapsy commented May 12, 2021 •

edited

Loading

JoshuaToenyes commented May 24, 2021 •

edited

Loading

huchim commented Jun 9, 2021 •

edited

Loading