Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Docs: Remove react-dom@18 warning in docs #21197

Merged
merged 14 commits into from
Feb 24, 2023

Conversation

tmeasday
Copy link
Member

@tmeasday tmeasday commented Feb 22, 2023

Closes #20729

What I did

As planned:

  • Create a package @storybook/react-dom-shim with two entry points
    • the first one (. => /dist/react-16) uses react-dom@17's code path
    • the second (/dist/react-18) uses react-dom@18's.
  • In @storybook/react and @storybook/addon-docs depend on the above, import the former and use in the place of react-dom.
  • Additionally, add an alias in both packages (or perhaps a preset dependency on the shim package which adds an alias), which does something along the lines of:
import { readJSON } from 'fs-extra';

export const webpackFinal: StorybookConfig['webpackFinal'] = async (config) => {
  const reactDomPkg = await readJSON(require.resolve('react-dom/package.json'));
  const isReact18 = reactDomPkg?.version?.startsWith('18') || reactDomPkg?.version?.startsWith('0.0.0');

  if (!isReact18) return config;

  return {
    ...config,
    resolve: {
       ...config.resolve,
       alias: {
         '@storybook/react-dom-shim': '@storybook/react-dom-shim/react-18'
       }
    }
  };
};

And similar for Vite.

How to test

Render story + docs and check for react warning (and that it works) in:

  1. react 17 project
  2. react 18 project
  3. react 18 project with legacyRootApi = true
  4. non react project

(all of the above in WP + vite)

Checklist

  • Make sure your changes are tested (stories and/or unit, integration, or end-to-end tests)
  • Make sure to add/update documentation regarding your changes
  • If you are deprecating/removing a feature, make sure to update
    MIGRATION.MD

Maintainers

  • If this PR should be tested against many or all sandboxes,
    make sure to add the ci:merged or ci:daily GH label to it.
  • Make sure this PR contains one of the labels below.

["cleanup", "BREAKING CHANGE", "feature request", "bug", "documentation", "maintenance", "dependencies", "other"]

Copy link
Member

@IanVS IanVS left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This seems like a much less hacky way of handling react version support. 👏

I had a few comments, and a concern about Vite dealing with absolute paths, but I don't have a chance to test it right now, so maybe it's fine.

code/lib/react-dom-shim/package.json Show resolved Hide resolved
code/lib/react-dom-shim/src/preset.ts Show resolved Hide resolved
code/lib/react-dom-shim/package.json Outdated Show resolved Hide resolved
code/renderers/react/package.json Show resolved Hide resolved
code/renderers/react/src/preset.ts Outdated Show resolved Hide resolved
@ndelangen ndelangen self-assigned this Feb 23, 2023
@valentinpalkovic
Copy link
Contributor

I love the changes <3

Copy link
Member

@ndelangen ndelangen left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

code LGTM

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
addon: docs bug builder-vite builder-webpack5 ci:daily Run the CI jobs that normally run in the daily job. react
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Remove React 18 warning in docs
4 participants