[SOLVED] window is not defined

[urban epoch]

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

[spring girder]

Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

[robust scarab]

Are you using window in client component or server component?

Window is only available inside client

[urban epoch]

is this about this instruction at the top of file?

guess im using client component

[robust scarab]

yes

[robust scarab]

still undefined?

pls share code snippet if so

[urban epoch]

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)

[robust scarab]

can u share full component

a simple fix would be to check if window is undefined before setting

[urban epoch]

it may look a bit weird cuz im only learning webdev rn

[robust scarab]

yep i see

ur calling window before it is available i think

i would

[urban epoch]

 ⨯ 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 ;

[robust scarab]

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

useEffect(() => {
  setJobs(fetchJobs());
}, []);

[robust scarab]

did it work?

[urban epoch]

yeah, just tried, T H A N K S ❤️

[robust scarab]

no problem

u can mark as solved 🙂

[frank pecan]

@robust scarab what message should I mark

[robust scarab]

id say this one #1199768770957295726 message

[urban epoch]

[SOLVED] window is not defined