storybook: [Bug]: findDOMNode warnings when running storybook

Describe the bug

I’m seeing findDOMNode warnings whenever running storybook. I don’t see warnings when running my app, there are no references to findDOMNode in my code, and the entire stacktrace only references code in node_modules/@storybook/manager/dist/

Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of SizeMeReferenceWrapper which is inside StrictMode. Instead, add a ref directly to the element you want to reference. Learn more about using refs safely here: https://fb.me/react-strict-mode-find-node
    in div (created by SizeMePlaceholder)
    in SizeMePlaceholder (created by SizeMeRenderer(Component))
    in SizeMeReferenceWrapper (created by SizeMeRenderer(Component))
    in SizeMeRenderer(Component) (created by SizeMe(Component))
    in SizeMe(Component)
    in ThemeProvider
    in Unknown (created by ManagerConsumer)
    in ManagerConsumer (created by Manager)
    in EffectOnMount (created by Manager)
    in Manager (created by QueryLocation)
    in QueryLocation (created by Main2)
    in Main2 (created by Root4)
    in Router (created by LocationProvider)
    in LocationProvider (created by Root4)
    in HelmetProvider (created by Root4)
    in StrictMode (created by Root4)
    in Root4
printWarning	@	chunk-OVLD5KZF.mjs:2
error	@	chunk-OVLD5KZF.mjs:1
findHostInstanceWithWarning	@	chunk-OVLD5KZF.mjs:125
findDOMNode	@	chunk-OVLD5KZF.mjs:127
value	@	chunk-BINOJGLR.mjs:10
value	@	chunk-BINOJGLR.mjs:10
commitLifeCycles	@	chunk-OVLD5KZF.mjs:88
commitLayoutEffects	@	chunk-OVLD5KZF.mjs:90
callCallback2	@	chunk-OVLD5KZF.mjs:2
invokeGuardedCallbackDev	@	chunk-OVLD5KZF.mjs:2
invokeGuardedCallback	@	chunk-OVLD5KZF.mjs:2
commitRootImpl	@	chunk-OVLD5KZF.mjs:90
unstable_runWithPriority	@	chunk-OVLD5KZF.mjs:1
runWithPriority$1	@	chunk-OVLD5KZF.mjs:9
commitRoot	@	chunk-OVLD5KZF.mjs:90
finishSyncRender	@	chunk-OVLD5KZF.mjs:90
performSyncWorkOnRoot	@	chunk-OVLD5KZF.mjs:90
scheduleUpdateOnFiber	@	chunk-OVLD5KZF.mjs:90
updateContainer	@	chunk-OVLD5KZF.mjs:127
(anonymous)	@	chunk-OVLD5KZF.mjs:127
unbatchedUpdates	@	chunk-OVLD5KZF.mjs:90
legacyRenderSubtreeIntoContainer	@	chunk-OVLD5KZF.mjs:127
render	@	chunk-OVLD5KZF.mjs:127
renderStorybookUI	@	chunk-BINOJGLR.mjs:394
(anonymous)	@	runtime.mjs:1

To Reproduce

My project uses Vite and sb repro isn't offering that option. What should I do instead?

System

Environment Info:

  System:
    OS: macOS 12.6
    CPU: (10) arm64 Apple M1 Pro
  Binaries:
    Node: 16.18.1 - ~/Library/Caches/fnm_multishells/76584_1670363438196/bin/node
    Yarn: 1.22.17 - /opt/homebrew/bin/yarn
    npm: 8.19.2 - ~/Library/Caches/fnm_multishells/76584_1670363438196/bin/npm
  Browsers:
    Chrome: 108.0.5359.94
    Firefox: 107.0
    Safari: 16.0
  npmPackages:
    @storybook/addon-essentials: ^7.0.0-alpha.59 => 7.0.0-alpha.59
    @storybook/addon-interactions: ^7.0.0-alpha.59 => 7.0.0-alpha.59
    @storybook/addon-links: ^7.0.0-alpha.59 => 7.0.0-alpha.59
    @storybook/react: ^7.0.0-alpha.59 => 7.0.0-alpha.59
    @storybook/react-vite: ^7.0.0-alpha.59 => 7.0.0-alpha.59
    @storybook/testing-library: ^0.0.13 => 0.0.13

Additional context

No response

About this issue

  • Original URL
  • State: closed
  • Created 2 years ago
  • Reactions: 15
  • Comments: 16 (13 by maintainers)

Most upvoted comments

Seeing the same when running Storybook 7.0 alpha. It’s the react-sizeme library that relies on findDOMNode.

They have two old issues ctrlplusb/react-sizeme#156 and ctrlplusb/react-sizeme#199 (going all the way back to 2018) - Seems unlikely to be changed in the package? Should Storybook migrate to another package?

Thank you for the investigation! Seems like we could migrate to https://www.npmjs.com/package/react-resize-detector instead.

Made a new PR where I rewrote it to use the useResizeDetector hook. Also fixed an issue with react-draggable, since that also was falling back to use findDOMNode when not given a ref.

Yay!! I just released https://github.com/storybookjs/storybook/releases/tag/v7.0.0-beta.13 containing PR #20333 that references this issue. Upgrade today to the @next 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.

Yowza!! I just released https://github.com/storybookjs/storybook/releases/tag/v7.0.0-beta.15 containing PR #20368 that references this issue. Upgrade today to the @next NPM tag to try it out!

npx sb upgrade --prerelease

@shilman, react-resize-detector also seems to use the deprecated findDOMNode as seen here : https://github.com/maslianok/react-resize-detector/search?q=findDOMNode

This is just the removable of StrictMode. The real fix is still in #20368

Yeah, I just upgraded to next version, but error’s still there.

Same issue on 7.0.0-beta.4.