Toen ik de Sidenav van @gemeente-denhaag had geïmporteerd en in mijn code gebruikte, liep ik keer op keer tegen een Vercel-deploymentsfout aan. Ik had geen idee waarom dit gebeurde, aangezien de code geen fouten leek te bevatten en alles soepel verliep tot aan de deployfase.
Bij het implementeren van de sidenav-component van Den Haag kwam ik een fout tegen. We gebruiken React-componenten zoals sidenav in Next.js, maar er gaat iets mis bij server-side rendering. Telkens wanneer de component wordt gebruikt, krijgen we een foutmelding door de CSS-injectiecode: document is undefined
Stap 2: Implementeer de oplossing.
Met deze kleine check if (typeof document !== 'undefined') { ... } wordt de CSS-injectie overgeslagen tijdens server-side rendering, hopelijk werken alle componenten nu goed in Next.js.
Toen ik de Sidenav van @gemeente-denhaag had geïmporteerd en in mijn code gebruikte, liep ik keer op keer tegen een Vercel-deploymentsfout aan. Ik had geen idee waarom dit gebeurde, aangezien de code geen fouten leek te bevatten en alles soepel verliep tot aan de deployfase.
Blijkt dat @gemeente-denhaag/sidenav een bug heeft.
Stap 1:CCS injection bug.Bij het implementeren van de sidenav-component van Den Haag kwam ik een fout tegen. We gebruiken React-componenten zoals sidenav in Next.js, maar er gaat iets mis bij server-side rendering. Telkens wanneer de component wordt gebruikt, krijgen we een foutmelding door de CSS-injectiecode: document is undefined
Stap 2:Implementeer de oplossing.Met deze kleine check if (typeof document !== 'undefined') { ... } wordt de CSS-injectie overgeslagen tijdens server-side rendering, hopelijk werken alle componenten nu goed in Next.js.