search

maslianok / react-resize-detector

A Cross-Browser, Event-based, Element Resize Detection for React
http://maslianok.github.io/react-resize-detector/
MIT License
1.25k stars 91 forks source link

Package not compatible with Edge Functions #246

Closed wscotten closed 9 months ago

wscotten commented 1 year ago

Hello! Love using your package. I am trying to migrate my Next.js app to use Edge functions but run into this error when using react-resize-detector:

Import trace for requested module:
./node_modules/react-resize-detector/build/index.esm.js
./app/page.tsx
 ⚠ ./node_modules/react-resize-detector/build/index.esm.js
Attempted import error: 'findDOMNode' is not exported from 'react-dom' (imported as 'findDOMNode').

Package with minimal repro: https://github.com/wscotten/recharts-bug

When you comment out the following lines in app/page.tsx the error goes away.

export const runtime = "edge";
export const preferredRegion = "iad1";
snelsi commented 1 year ago

From the error message you provided, I assume findDOMNode is not available in Edge runtime? The app still compiles and works fine for me, so seems like it's no more than a console warning atm, and not a blocking error. https://react.dev/reference/react-dom/findDOMNode

Sadly, findDOMNode is a legacy that we cannot simply throw away. 🫤

We use the findDOMNode function to power withResizeDetector and ResizeDetector components "automatically", without the need for the user to pass the ref prop.

And since we can't achieve the same behavior without findDOMNode, it leaves us with a choice of either deprecating withResizeDetector and ResizeDetector, or rewriting them to require passing a ref. Both of which are a breaking change and would require a major version bump.

I think that's something that only @maslianok can approve and implement.

snelsi commented 1 year ago

Also, please read this section of the README 👇 https://github.com/maslianok/react-resize-detector#refs

wscotten commented 1 year ago

Thank you for getting back to me!

I am currently using refs. So there is no end-user bug, just a lot of console noise.

findDOMNode is deprecated though, so I hope the maintainers migrate off it at some point!

maslianok commented 9 months ago

We've streamlined our library by eliminating all methods except hooks. I think today, no one uses Class Components and HOCs, so it's ok to support "useResizeDetector" only.

This version is currently in beta and can be installed via npm install react-resize-detector@10.0.0-beta.0.

We anticipate releasing it as a stable version in the coming weeks.