Storybook 6.5.9 not working with React 18.

[Vinayaksma]

Describe the bug In my project with React 18, the version of Storybook and its add-ons with version 6.5.9 are not compatible with react version 18. Getting failed while installing package.

Conflicting peer dependency: [email protected] npm WARN node_modules/react npm WARN peer react@"^16.13.1 || ^17.0.0" from @mdx-js/[email protected] npm WARN node_modules/@storybook/addon-docs/node_modules/@mdx-js/react npm WARN @mdx-js/react@"^1.6.22" from @storybook/[email protected] npm WARN node_modules/@storybook/addon-docs

[ldsenow]

I am wondering if storybook is being maintained or not. I found a lot of issues with the 6.5.9 update but I don't see reply from the maintainers.

[nonameolsson]

I have the same problem :(

[konhi]

@nonameolsson it might be fixed in v7.0 - which is currently in alpha ✨

https://twitter.com/storybookjs/status/1550126340648476672

[ColmBhandal]

Similar issue for me in 6.5.10:

npm WARN While resolving: [email protected]
npm WARN Found: [email protected]
npm WARN node_modules/react
npm WARN   peer react@"^16.8.4 || ^17.0.0" from [email protected]
npm WARN   node_modules/@storybook/addon-actions/node_modules/react-inspector
npm WARN     react-inspector@"^5.1.0" from @storybook/[email protected]
npm WARN     node_modules/@storybook/addon-actions
npm WARN 
npm WARN Could not resolve dependency:
npm WARN peer react@"^0.14.8 || ^15.0.1 || ^16.0.0 || ^17.0.1" from [email protected]
npm WARN node_modules/@storybook/react/node_modules/react-element-to-jsx-string
npm WARN   react-element-to-jsx-string@"^14.3.4" from @storybook/[email protected]
npm WARN   node_modules/@storybook/react
npm WARN 
npm WARN Conflicting peer dependency: [email protected]
npm WARN node_modules/react
npm WARN   peer react@"^0.14.8 || ^15.0.1 || ^16.0.0 || ^17.0.1" from [email protected]
npm WARN   node_modules/@storybook/react/node_modules/react-element-to-jsx-string
npm WARN     react-element-to-jsx-string@"^14.3.4" from @storybook/[email protected]
npm WARN     node_modules/@storybook/react
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: [email protected]
npm WARN Found: [email protected]
npm WARN node_modules/react-dom
npm WARN   react-dom@"^18.2.0" from the root project
npm WARN   40 more (@chakra-ui/modal, @chakra-ui/portal, ...)
npm WARN 
npm WARN Could not resolve dependency:
npm WARN peer react-dom@"^0.14.8 || ^15.0.1 || ^16.0.0 || ^17.0.1" from [email protected]
npm WARN node_modules/@storybook/react/node_modules/react-element-to-jsx-string
npm WARN   react-element-to-jsx-string@"^14.3.4" from @storybook/[email protected]
npm WARN   node_modules/@storybook/react
npm WARN 
npm WARN Conflicting peer dependency: [email protected]
npm WARN node_modules/react-dom
npm WARN   peer react-dom@"^0.14.8 || ^15.0.1 || ^16.0.0 || ^17.0.1" from [email protected]
npm WARN   node_modules/@storybook/react/node_modules/react-element-to-jsx-string
npm WARN     react-element-to-jsx-string@"^14.3.4" from @storybook/[email protected]
npm WARN     node_modules/@storybook/react

[der-daniel]

See https://github.com/algolia/react-element-to-jsx-string/issues/728

This is already fixed by react-element-to-jsx-string

Maybe just bumping the dep would fix it.

[morganney]

See algolia/react-element-to-jsx-string#728

This is already fixed by react-element-to-jsx-string

Maybe just bumping the dep would fix it.

  "overrides": {
    "@storybook/react": {
      "react-element-to-jsx-string": "15.0.0"
    }
  }

[shilman]

Olé!! I just released https://github.com/storybookjs/storybook/releases/tag/v7.0.0-alpha.30 containing PR #19104 that references this issue. Upgrade today to the @future NPM tag to try it out!

npx sb upgrade --prerelease

Closing this issue. Please re-open if you think there's still more to do.

[cameron-martin]

@mdx-js/mdx, @mdx-js/react and @mdx-js/loader v1 is still used by the docs addon, which only support React 17. I did try upgrading these to v2, but hit a lot of issues with those packages and a lot of their dependencies being esmodule-only.

These are mentioned in the original post. Can this be re-opened?

[ismay]

I've tried upgrading to v7 with the suggested npx sb upgrade --prerelease. It's better, but I think one dependency issue still needs to be addressed. According to this comment: https://github.com/storybookjs/storybook/issues/18298#issuecomment-1136158953 by @shilman the legacy peerdeps override would no longer be necessary with sb v7. So I've skipped this migration step:

After installing the v7 packages I'm still left with these peerdependency conflicts:

So it seems that @mdx-js/react still needs to be upgraded. Is that still in the works for storybook v7 @shilman?

[daphnesmit]

N Could not resolve dependency: npm WARN peer react@"^16.8.4 || ^17.0.0" from [email protected] npm WARN node_modules/@storybook/addon-actions/node_modules/react-inspector npm WARN react-inspector@"^5.1.0" from @storybook/[email protected]

[shilman]

@ismay mdx has been upgraded in v7 npx sb@next upgrade --prerelease

@daphnesmit npm audit warnings are fixed in v7. can't be fixed in v6 due to semver/breaking changes in dependent packages.