Next.js Discord

Discord Forum

Getting a deployment error

Answered
Silver Fox posted this in #help-forum
Open in Discord
Silver FoxOP
a deployment error
Answered by @ts-ignore
well then dynamically import this component
View full answer

40 Replies

Silver FoxOP
Error occurred prerendering page "/dashboard". Read more: https://nextjs.org/docs/messages/prerender-error
ReferenceError: sessionStorage is not defined
    at Dashboard (C:\Users\Urvah\Downloads\Stuff\Projects\slotho\.next\server\app\dashboard\page.js:445:45)
    at jg (C:\Users\Urvah\Downloads\Stuff\Projects\slotho\.yarn\__virtual__\next-virtual-e81df86063\5\AppData\Local\Yarn\Berry\cache\next-npm-13.4.19-bc82e788ec-9.zip\node_modules\next\dist\compiled\react-dom\cjs\react-dom-server.edge.production.min.js:117:273)
    at Z (C:\Users\Urvah\Downloads\Stuff\Projects\slotho\.yarn\__virtual__\next-virtual-e81df86063\5\AppData\Local\Yarn\Berry\cache\next-npm-13.4.19-bc82e788ec-9.zip\node_modules\next\dist\compiled\react-dom\cjs\react-dom-server.edge.production.min.js:124:91)
    at jg (C:\Users\Urvah\Downloads\Stuff\Projects\slotho\.yarn\__virtual__\next-virtual-e81df86063\5\AppData\Local\Yarn\Berry\cache\next-npm-13.4.19-bc82e788ec-9.zip\node_modules\next\dist\compiled\react-dom\cjs\react-dom-server.edge.production.min.js:118:9)

> Export encountered errors on following paths:
        /dashboard/page: /dashboard
        /page: /
"use client" 

import { useEffect, useState, lazy, Suspense } from 'react'
import Link from 'next/link'
import Logo from '../components/Logo'
import UserInfo from '../components/UserInfo'
import YourServers from '../components/YourServers'
import Loader from '../components/Loader'
import End from '../components/End'

const AddServer = lazy(() => import('../components/AddServer'))

export default function Dashboard() {
    const [dashboard, setDashboard] = useState(null)
    const [addServer, setAddServer] = useState(false)
    const [ID, setID] = useState(sessionStorage.getItem('id-allowed'))

    const interval = setInterval(() => ID === null ? update() : clearInterval(interval), 200)

    useEffect(() => {
        fetch(`/api/users/${ID}`)
            .then(res => res.json())
            .then(data => setDashboard(data.requestedUser) )
    }, [ID])

    const update = () => setID(sessionStorage.getItem('id-allowed'))

    return (
        <>
            {!addServer ? 
            <div className="dashboard">
                { ID ? dashboard && dashboard !== "User not found!" ? (
                    <>
                        <Logo />
                        <h1 style={{ marginTop: 100 }}>Dashboard</h1>
                        <img src="sloth2.png" className="sloth" />
                        <h2>THINGS WE KNOW ABOUT YOU</h2>
                        <UserInfo dashboard={dashboard} />
                        <YourServers setAddServer={() => setAddServer(true)} dashboard={dashboard}/>
                        <End />
                    </>
                ) : (
                    <h2>{ dashboard }</h2>
                ) : <h2>:( <Link href="/">Log In</Link> <Link href="/">Go Home</Link></h2>
            }
            </div> : 
            <Suspense fallback={<Loader width="15%"/>}>
                 <AddServer setAddServer={() => setAddServer(false)} dashboard={dashboard}/>
            </Suspense>
        }
       
   { !dashboard && <Loader width="15%"/>}
        </>
    )
}
dashboard/page.jsx
I have "use client" at top but it still showing me this error
@Silver Fox I have "use client" at top but it still showing me this error
pages with "use client" at the top is still pre rendered on the server, so you still need to put your sessionStoragelogin in useEffect
Silver FoxOP
how do I make it fully render on the client
or dix this
@Silver Fox how do I make it fully render on the client
move this code in another file and then mount it in a page with condition checking if type window !==undefined
Silver FoxOP
I make another dashboard.jsx component and then I mount it like this
{window !== undefined && <Dashboard />}

like this?
Silver FoxOP
ok
@@ts-ignore typeof window
Silver FoxOP
still getting the same error
my dashboard/page.jsx
"use client"
import Dashboard from "../components/Dashboard"
export default function DashboardPage() {
    return (
        <>
            { typeof window !== undefined && <Dashboard />}
        </>
    )
}
@@ts-ignore did you try it in dev mode?
Silver FoxOP
🤓
whats that
@Silver Fox whats that
pnpm dev?
Silver FoxOP
Im I not in dev mode
@@ts-ignore `pnpm dev`?
Silver FoxOP
ofc
ofc
it works fine
but when I run yarn build I get error
try building it locally first
@@ts-ignore try building it locally first
Silver FoxOP
not working
@Silver Fox not working
well then dynamically import this component
Answer
@@ts-ignore well then dynamically import this component
Silver FoxOP
👍 solved
thanks bro
@Silver Fox 👍 solved
np, just marked it as solved for people in the future
Silver FoxOP
wait now, im getting the same error in / page.jsx
solved as well
how to mark it solved?
Silver FoxOP
PS C:\Users\Urvah\Downloads\Stuff\Projects\slotho> yarn run build
- info Creating an optimized production build  
- info Compiled successfully
- info Linting and checking validity of types  
- info Collecting page data  
- info Generating static pages (6/6)
- info Finalizing page optimization  

Route (app)                                Size     First Load JS
┌ ○ /                                      1.75 kB        80.3 kB
├ λ /api/servers                           0 B                0 B
├ λ /api/servers/[name]                    0 B                0 B
├ λ /api/users                             0 B                0 B
├ λ /api/users/[id]                        0 B                0 B
â”” â—‹ /dashboard                             7.84 kB        86.4 kB
+ First Load JS shared by all              78.6 kB
  ├ chunks/19ec9c89-7fe20c48d79ffd4e.js    50.5 kB
  ├ chunks/669-59857b43d59afc30.js         26.1 kB
  ├ chunks/main-app-01461c2030343b22.js    220 B
  â”” chunks/webpack-1c8cc4bc6a886c08.js     1.78 kB

Route (pages)                              Size     First Load JS
─ ○ /404                                   182 B          76.5 kB
+ First Load JS shared by all              76.3 kB
  ├ chunks/framework-520bdecf7c0f6700.js   44.8 kB
  ├ chunks/main-693bea511c46f20e.js        29.5 kB
  ├ chunks/pages/_app-3af7ea217c7dc497.js  195 B
  â”” chunks/webpack-1c8cc4bc6a886c08.js     1.78 kB

λ  (Server)  server-side renders at runtime (uses getInitialProps or getServerSideProps)
â—‹  (Static)  automatically rendered as static HTML (uses no initial props)

GG
but not working like on dev sever
ohhhhhhhhhhhhhhh
I forgot to change the discord link
its redirecting to localhost