[Bug]: Accessing element.ref was removed in React 19

[pzaczkiewicz-athenahealth]

Describe the bug

If defining a StoryFn with @storybook/react-vite, it's possible to get the following console warning:

preview.tsx:12 Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.

After debugging, I found that [email protected] is the source of the console error, on this line. It was hard to find out that storybook was responsible, as react-element-to-jsx-string is a devDependency of @storybook/react, not a runtime dependency. Clearly it's getting bundled as a part of storybook's build process, because the javascript in the stack trace matched the original source. The latest version of react-element-to-jsx-string does not have this problematic line of code, but not even [email protected] has updated this devDependency.

I've included a stackblitz repo, but a minimalistic story to reproduce is:

export const RefTest: StoryFn = (args) => {
  const outerRef = useRef<HTMLDivElement>(null);
  const innerRef = useRef<HTMLDivElement>(null);
  return (
    <div ref={outerRef}>
      <div ref={innerRef}>Test</div>
    </div>
  );
};

Reproduction link

https://stackblitz.com/edit/github-h9ntpeay?file=src%2Fstories%2FRefTest.stories.tsx

Reproduction steps

1. Open the single story
2. Open the console
3. Console error is present

System

Storybook Environment Info:

  System:
    OS: Linux 5.0 undefined
    CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 20.19.1 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 10.8.2 - /usr/local/bin/npm <----- active
    pnpm: 8.15.6 - /usr/local/bin/pnpm
  npmPackages:
    @storybook/addon-docs: ^9.0.0-rc.0 => 9.0.0-rc.0 
    @storybook/addon-onboarding: ^9.0.0-rc.0 => 9.0.0-rc.0 
    @storybook/react-vite: ^9.0.0-rc.0 => 9.0.0-rc.0 
    storybook: ^9.0.0-rc.0 => 9.0.0-rc.0

Additional context

No response

[greptile-apps]

** Disclaimer** This information might be inaccurate, due to it being generated automatically
This can be fixed by updating the react-element-to-jsx-string dependency in @storybook/react to version 15.0.1 or later. The dependency is defined in code/lib/core-server/package.json. Update the dependency version and run yarn install to resolve the warning.

About Greptile

This response provides a starting point for your research, not a precise solution.

Help us improve! Please leave a 👍 if this is helpful and 👎 if it is irrelevant.

Edit Issue Bot Settings · Greptile