Next.js Discord

Discord Forum

[SOLVED] window is not defined

Answered
King Shepherd posted this in #help-forum
Open in Discord
King ShepherdOP
Hi, im using window.localStorage in my project, website is working properly but terminal throws this error every compiling, tried suggestion "use if (window !== undefined)" but its not working, it just now throws "window is not defined" with pointing this line instead of original one
Answered by Northeast Congo Lion
useEffect(() => {
  setJobs(fetchJobs());
}, []);
View full answer

29 Replies

Window is only available inside client
@Northeast Congo Lion Are you using window in client component or server component?
King ShepherdOP
is this about this instruction at the top of file?
guess im using client component
Northeast Congo Lion
yes
@King Shepherd is this about this instruction at the top of file?
Northeast Congo Lion
still undefined?
pls share code snippet if so
@Northeast Congo Lion still undefined?
King ShepherdOP
yep

export const StableDiffusionTab = forwardRef<Props, "div">(({setModalImage, modalState}, ref) => {

    const fetchJobs = () => {
        // @ts-ignore
            const jobs = window.localStorage.getItem("jobList")
            if (jobs !== 'null' && jobs !== null) {
                console.log(jobs)
                return JSON.parse(jobs)
            } else {

                return []
            }
    }


error
⨯ src\app\tabs\stablediffusion.tsx (68:25) @ window
 ⨯ ReferenceError: window is not defined
    at fetchJobs (./src/app/tabs/stablediffusion.tsx:48:22)
    at eval (./src/app/tabs/stablediffusion.tsx:70:80)
  66 |     const fetchJobs = () => {
  67 |         // @ts-ignore
> 68 |             const jobs = window.localStorage.getItem("jobList")
     |                         ^
  69 |             if (jobs !== 'null' && jobs !== null) {
  70 |                 console.log(jobs)
  71 |                 return JSON.parse(jobs)
Northeast Congo Lion
can u share full component
a simple fix would be to check if window is undefined before setting
@Northeast Congo Lion can u share full component
King ShepherdOP
it may look a bit weird cuz im only learning webdev rn
Northeast Congo Lion
yep i see
ur calling window before it is available i think
i would
@Northeast Congo Lion a simple fix would be to check if window is undefined before setting
King ShepherdOP
 ⨯ src\app\tabs\stablediffusion.tsx (57:8) @ fetchJobs
 ⨯ ReferenceError: window is not defined
    at fetchJobs (./src/app/tabs/stablediffusion.tsx:47:9)
    at eval (./src/app/tabs/stablediffusion.tsx:68:80)
  55 |
  56 |     const fetchJobs = () => {
> 57 |         if (window === undefined) return ;
Northeast Congo Lion
const [ jobList, setJobs ] = useState<Job[]>(fetchJobs());
change this to:
const [ jobList, setJobs ] = useState<Job[]>([]);
keep it empty
add useEffect()
and set state from useEffect
useEffect will call and window object shud be available
Northeast Congo Lion
useEffect(() => {
  setJobs(fetchJobs());
}, []);
Answer
@Northeast Congo Lion did it work?
King ShepherdOP
yeah, just tried, T H A N K S ❤️
Northeast Congo Lion
no problem
u can mark as solved 🙂
joulev
@Northeast Congo Lion what message should I mark