Has anybody used windy api with ReactJS or NextJs. Is it possible?

Madusara Liyanage

I created a nextjs component like this. Sometimes it works, but most of the time I see only a grey outlined map with no data and I get the error "ReferenceError: window is not defined" in the console.

result

jorgef

Hello, I don't use NextJS but this error looks like you're trying to access browser-only symbols on the server. You need to first check if the environment is browser.

David Ryzec 3

@Madusara-Liyanage Hi, make sure your code only runs in browser and not on server.

Madusara Liyanage

@jorgef said in Has anybody used windy api with ReactJS or NextJs. Is it possible?:

Hello, I don't use NextJS but this error looks like you're trying to access browser-only symbols on the server. You need to first check if the environment is browser.

Thank you for your response.
I added a window check condition inside the useEffect. But still the same behaviour is observed.

useEffect(() => {
    if (typeof window !== 'undefined') {
      // rest of the code
    }
}, [])

When I do a change in the code (say add some styles to the div and save) the map is displayed properly for just one time. On subsequent page refreshes, the map is grey with the initial error message in the console. But in some random page refreshes, map is properly displayed.

Madusara Liyanage

@jorgef said in Has anybody used windy api with ReactJS or NextJs. Is it possible?:

Hello, I don't use NextJS but this error looks like you're trying to access browser-only symbols on the server. You need to first check if the environment is browser.

Thank you for your response.
I added a window check condition inside the useEffect. But still the same behaviour is observed.

useEffect(() => {
    if (typeof window !== 'undefined') {
      // rest of the code
    }
}, [])

When I do a change in the code (say add some styles to the div and save) the map is displayed properly for just one time. On subsequent page refreshes, the map is grey with the initial error message in the console. But in some random page refreshes, map is properly displayed.

Madusara Liyanage

@David-Ryzec-3

Thank you so much for your response. I added a condition - if (typeof window !== 'undefined') inside the useEffect

useEffect(() => {
    if (typeof window !== 'undefined'){
        // rest of the code
    }
}, [])

But still getting the same error.

Madusara Liyanage

@David-Ryzec-3

Thank you so much for your response. I added a condition - if (typeof window !== 'undefined') inside the useEffect

useEffect(() => {
    if (typeof window !== 'undefined'){
        // rest of the code
    }
}, [])

But still getting the same error.