useWindowSize does not work on App Router (nextjs)
Nessuno ha ancora preso questa issue.
Valutazione
- Difficoltà
- 3/5
- Tempo stimato
- 1-2 giorni
- Idoneità per principianti
- 38/100
- Tipo di issue
- Bug
- Chiarezza
- Abbastanza chiara
- Stato di attività
- Ferma
- Stack tecnologico
- nextjs, react, typescript
Direzione di ricerca
Start by reproducing the reported hydration warning with Next.js 14 App Router and the useWindowSize entry point shown in the issue. Compare the server and browser results, then verify that the hook returns the browser's window dimensions without a width mismatch.
Scritto dal modello di indicizzazione a partire dal testo della issue.
Descrizione
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
- Lingua principale
- TypeScript
- Stelle
- 44k
- Fork
- 3.3k
- Metriche di merge delle PR
- Nessuna PR unita negli ultimi 30g
Preparare l'ambiente
- Nessun Dockerfile né file Docker Compose
- Ha un modello di pull request
- Leggi la guida per i contributori
Come iniziare
- Leggi tutta la issue e poi la guida ai contributi del progetto.
- Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
- Fai un fork del repository e lavora su un branch.
- Apri una pull request che faccia riferimento al numero della issue.
Altre issue di streamich/react-use
-
Difficoltà 2/5 1-3 ore Idoneità per principianti 72/100
-
Add Generic Fn for useDebounceForse già presa @itsmejay80 l’ha presa 192 giorni fa. Aperta
Difficoltà 2/5 1-3 ore Idoneità per principianti 68/100
-
Difficoltà 2/5 1-3 ore Idoneità per principianti 64/100
-
useVideo.story.tsx - sampleVideo can not be loadedForse di nuovo libera Una pull request per questa issue è stata chiusa senza essere unita. Aperta
Difficoltà 1/5 Meno di un'ora Idoneità per principianti 62/100
-
useSlider: event callbacks are not updatedForse già presa @erykpiast l’ha presa 1839 giorni fa. Aperta
Difficoltà 2/5 1-3 ore Idoneità per principianti 62/100
Tutte le issue di streamich/react-use
Issue simili
-
Area/Cloud Needs Triage Type/Bug
Difficoltà 1/5 1-3 ore Idoneità per principianti 86/100
wso2/product-integrator#2847 ·
I maintainer di solito rispondono entro 1 giorno
-
bug
Difficoltà 2/5 1-3 ore Idoneità per principianti 67/100
bluesky-social/social-app#12118 ·
I maintainer di solito rispondono entro 1 giorno
-
enhancement
Difficoltà 1/5 Meno di un'ora Idoneità per principianti 85/100
I maintainer di solito rispondono entro 1 giorno
-
Difficoltà 2/5 1-3 ore Idoneità per principianti 77/100
heygen-com/hyperframes#6021 ·
I maintainer di solito rispondono entro 1 giorno
-
Edit: Tele Posadas HDApertacheck:passed streams:edit
Difficoltà 2/5 1-3 ore Idoneità per principianti 68/100
I maintainer di solito rispondono entro 1 giorno