[Bug]: findDOMNode warnings when running storybook #20140

lslunis · 2022-12-07T21:54:28Z

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

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

thebuilder · 2022-12-07T22:03:14Z

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?

furkanalptokac · 2022-12-13T12:23:13Z

Same issue on 7.0.0-beta.4.

yannbf · 2022-12-14T08:46:23Z

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.

shilman · 2022-12-20T13:39:36Z

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.

mdaoust-sidlee · 2022-12-20T14:04:54Z

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

jkorejtko · 2022-12-20T15:00:51Z

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

ndelangen · 2022-12-20T15:31:57Z

😭

ndelangen · 2022-12-20T15:41:06Z

Looks like, perhaps if I pass a ref, I could make it go away:
https://github.com/maslianok/react-resize-detector/blob/3c855d73f8959b192cab86ebceac1da2e9d95103/src/ResizeDetector.tsx#L198

ndelangen · 2022-12-20T15:57:41Z

I'll disable strict-mode in the manager, for now.

thebuilder · 2022-12-20T19:47:31Z

Looks like, perhaps if I pass a ref, I could make it go away: maslianok/react-resize-detector@3c855d7/src/ResizeDetector.tsx#L198

Looks like you should pass one of:

A targetRef
A querySelector
A targetDomEl

If the components you are measuring don't support ref forwarding (is it an issue with Emotion?), then maybe a simple solution is to add a unique HTML selector attribute? Or just a plain <div> to take the ref and measure.

ndelangen · 2022-12-20T23:23:12Z

@thebuilder that seems like a great alternative, would you be open to submitting a PR?

thebuilder · 2022-12-21T14:19:28Z

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.

shilman · 2022-12-23T12:11:42Z

Yippee!! I just released https://github.com/storybookjs/storybook/releases/tag/v7.0.0-beta.14 containing PR #20345 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.

thebuilder · 2022-12-23T12:59:01Z

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

ndelangen · 2022-12-23T15:21:39Z

Yeah I recon when we upgrade the manager to React18, we'll add this back..

shilman · 2022-12-24T05:05:02Z

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

lslunis added bug needs triage labels Dec 7, 2022

shilman added ui linear and removed needs triage labels Dec 8, 2022

shilman added this to Core Team Projects Dec 8, 2022

shilman moved this to Todo in Core Team Projects Dec 8, 2022

ndelangen self-assigned this Dec 14, 2022

ndelangen mentioned this issue Dec 19, 2022

UI: swap react-sizeme for react-resize-detector #20333

Merged

ndelangen moved this from Required for RC to In Progress in Core Team Projects Dec 19, 2022

shilman closed this as completed Dec 20, 2022

Repository owner moved this from In Progress to Done in Core Team Projects Dec 20, 2022

ndelangen reopened this Dec 20, 2022

ndelangen moved this from Done to In Progress in Core Team Projects Dec 20, 2022

ndelangen mentioned this issue Dec 20, 2022

UI: Disable React.strictmode to avoid findNode deprecation warnings #20345

Merged

thebuilder mentioned this issue Dec 21, 2022

UI: fix deprecated ReactDOM.findDOMNode calls #20368

Merged

shilman closed this as completed Dec 23, 2022

Repository owner moved this from In Progress to Done in Core Team Projects Dec 23, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Bug]: findDOMNode warnings when running storybook #20140

[Bug]: findDOMNode warnings when running storybook #20140

lslunis commented Dec 7, 2022

thebuilder commented Dec 7, 2022 •

edited

Loading

furkanalptokac commented Dec 13, 2022 •

edited

Loading

yannbf commented Dec 14, 2022

shilman commented Dec 20, 2022

mdaoust-sidlee commented Dec 20, 2022

jkorejtko commented Dec 20, 2022

ndelangen commented Dec 20, 2022

ndelangen commented Dec 20, 2022

ndelangen commented Dec 20, 2022

thebuilder commented Dec 20, 2022

ndelangen commented Dec 20, 2022

thebuilder commented Dec 21, 2022

shilman commented Dec 23, 2022

thebuilder commented Dec 23, 2022

ndelangen commented Dec 23, 2022

shilman commented Dec 24, 2022

[Bug]: findDOMNode warnings when running storybook #20140

[Bug]: findDOMNode warnings when running storybook #20140

Comments

lslunis commented Dec 7, 2022

Describe the bug

To Reproduce

System

Additional context

thebuilder commented Dec 7, 2022 • edited Loading

furkanalptokac commented Dec 13, 2022 • edited Loading

yannbf commented Dec 14, 2022

shilman commented Dec 20, 2022

mdaoust-sidlee commented Dec 20, 2022

jkorejtko commented Dec 20, 2022

ndelangen commented Dec 20, 2022

ndelangen commented Dec 20, 2022

ndelangen commented Dec 20, 2022

thebuilder commented Dec 20, 2022

ndelangen commented Dec 20, 2022

thebuilder commented Dec 21, 2022

shilman commented Dec 23, 2022

thebuilder commented Dec 23, 2022

ndelangen commented Dec 23, 2022

shilman commented Dec 24, 2022

thebuilder commented Dec 7, 2022 •

edited

Loading

furkanalptokac commented Dec 13, 2022 •

edited

Loading