useWindowSize does not work on App Router (nextjs)

[ghostlexly]

What is the current behavior?

Gives an error: app-index.js:32 Warning: Prop width did not match. Server: "Infinity" Client: "1290"

This is probably due to app router running the code on server side even with "use client" specified.

Steps to reproduce it and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn't have extra dependencies other than react-use. Paste the link to your JSFiddle or CodeSandbox example below:

• install nextjs 14
• use app router
• create a component

"use client";

import useWindowSize from "react-use/lib/useWindowSize";

const StepSubmittedWidget = () => {
  const { width, height } = useWindowSize();

return (<></>)
}

export default StepSubmittedWidget;

What is the expected behavior?

Gives the browser's window sizes

A little about versions:

• OS: MacOS
• Browser (vendor and version): Chrome
• React: 18.2.0
• react-use: 17.4.2
• Did this worked in the previous package version? No

[vincentjr]

Running into the same issue here :x