8000 react-resize-detector broken in dev env since v14.0.2 · Issue #58767 · vercel/next.js · GitHub
[go: up one dir, main page]
Skip to content

react-resize-detector broken in dev env since v14.0.2 #58767

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.

8000
Sign up for GitHub

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

Jump to bottom
Open
1 task done
zophiana opened this issue Nov 22, 2023 · 5 comments
Open
1 task done

react-resize-detector broken in dev env since v14.0.2 #58767

zophiana opened this issue Nov 22, 2023 · 5 comments
Labels
bug Issue was opened via the bug report template. stale The issue has not seen recent activity.

Comments

@zophiana
Copy link
zophiana commented Nov 22, 2023 •
edited
Loading

Link to the code that reproduces this issue

https://github.com/Ungedummt/debug-nextjs

To Reproduce

  1. Start app in development enviroment
  2. Open page
  3. Now there should show up a red square, but not a green square, which is wrong

Current vs. Expected behavior

Currently

Only the red div is visible because the size of the green div is set to undefined.

Expected

Both the red and green divs should appear. This is because the size of the green div is intended to be constrained to match the size of the red div, provided by the functionality of react-resize-detector.

Verify canary release

  • I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
  Platform: win32
  Arch: x64
  Version: Windows 10 Pro
Binaries:
  Node: 18.17.1
  npm: N/A
  Yarn: N/A
  pnpm: N/A
Relevant Packages:
  next: 14.0.4-canary.9
  eslint-config-next: N/A
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.1.3
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

App Router

Additional context

I've also tried to export this as a static page, which seems to work. Also it works on hot reload.

The problem exists since this commit: 1b5e307
@zophiana zophiana added the bug Issue was opened via the bug report template. label Nov 22, 2023
@JesseKoldewijn
Copy link
Contributor

react.js doesn't seem to like running react-resize-detector inside StrictMode. turn this off and you should be able to see the width and height output. Just created a PR on your repro that gives you an overview of what you need to do to get RRD to work again.

@zophiana
Copy link
Author

Sorry @JesseKoldewijn, but I don't think disabling reactStrictMode is an option. Also, it used to work reliably with reactStrictMode enabled. Maybe React dev made it even stricter, because the commit since this happened is a pull of new React changes. But I'm pretty new to Next.js & React, so maybe there's something I'm not seeing or getting... if so, please correct me

@JesseKoldewijn
Copy link
Contributor

Sorry @JesseKoldewijn, but I don't think disabling reactStrictMode is an option. Also, it used to work reliably with reactStrictMode enabled. Maybe React dev made it even stricter, because the commit since this happened is a pull of new React changes. But I'm pretty new to Next.js & React, so maybe there's something I'm not seeing or getting... if so, please correct me

See what you can do is disabling strictmode globally and opting in by the use of React.StrictMode everywhere except for the element that uses RRD. One of the errors I've gotten was that it has to do with deprecated client-side api usage within react-resize-detector.

Besides, this is not an issue on Next.js but upstream in either React.js or RRD. (RRD should be the party to fix this matter since they're using unsupported code in their package. This library basically throws due to usage of code that might work fine in client-only applications but wont when using any form of server-rendering.

@zophiana zophiana mentioned this issue Dec 1, 2023
Closed
@zophiana
Copy link
Author
zophiana commented Dec 1, 2023

Besides, this is not an issue on Next.js but upstream in either React.js or RRD. (RRD should be the party to fix this matter since they're using unsupported code in their package. This library basically throws due to usage of code that might work fine in client-only applications but wont when using any form of server-rendering.

there is already an issue maslianok/react-resize-detector#247 (comment) and I commented on my findings

@nextjs-bot
Copy link
Collaborator

This issue has been automatically marked as stale due to two years of inactivity. It will be closed in 7 days unless there’s further input. If you believe this issue is still relevant, please leave a comment or provide updated details. Thank you.

@nextjs-bot nextjs-bot added the stale The issue has not seen recent activity. label May 29, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Issue was opened via the bug report template. stale The issue has not seen recent activity.
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@zophiana @JesseKoldewijn @nextjs-bot
0