error "window" is not available during server side rendering

Question

While trying to build my Gatsby site , I am facing an issue of undefined window , I am using a react library react-tiktok to embed tiktok videos in my site . while build the site , the building log shows this :

 error Page data from page-data.json for the failed page "/article/": {
9:40:38 PM:   "componentChunkName": "component---src-pages-article-tsx",
9:40:38 PM:   "path": "/article/",
9:40:38 PM:   "result": {
9:40:38 PM:     "pageContext": {}
9:40:38 PM:   },
9:40:38 PM:   "staticQueryHashes": [
9:40:38 PM:     "3704425200"
9:40:38 PM:   ]
9:40:38 PM: }
9:40:38 PM: failed Building static HTML for pages - 5.584s
9:40:38 PM: error "window" is not available during server side rendering.
9:40:38 PM: 
9:40:38 PM:   2372 |
9:40:38 PM:   2373 | var TIKTOK_OEMBED_BASE_URL = "https://www.tiktok.com/oembed";
9:40:38 PM: > 2374 | var fetchRetry$1 = fetchRetry(window.fetch);
9:40:38 PM:        | ^
9:40:38 PM:   2375 | function TikTok(_a) {
9:40:38 PM:   2376 |     var url = _a.url;
9:40:38 PM:   2377 |     var _b = useState(false), loaded = _b[0], setLoaded = _b[1];
9:40:38 PM: 
9:40:38 PM:   WebpackError: ReferenceError: window is not defined
9:40:38 PM:   
9:40:38 PM:   - index.es.js:2374 
9:40:38 PM:     [shukran]/[react-tiktok]/dist/index.es.js:2374:1
9:40:38 PM:   
9:40:38 PM:   - bootstrap:19 
9:40:38 PM:     shukran/webpack/bootstrap:19:1
9:40:38 PM:   
9:40:38 PM:   - static-entry.js:214 
9:40:38 PM:     shukran/.cache/static-entry.js:214:27
9:40:38 PM:   
9:40:38 PM:   - Utility.js:4 
9:40:38 PM:     [shukran]/[cache]/[stylis]/src/Utility.js:4:1

I don't know how to fix this issue in Gatsby , I know that I must define the state of which window is defined like this : if(typeof window !== 'undefined') {...} But I am not pretty sure where to put it in the node module , or the component . Please have a look and help me fix this issue , thanks !!

After I imported the component in lazy load which contains the node module , I got this :

 WebpackError: A component suspended while responding to synchronous input. This will cause the UI to be replaced with a loading indicator. To fix, updates that suspend should be wrapped with startTransition. (from plugin: gatsby-plugin-material-ui)

Concerning the react-tiktok module , index.es.js contains this :

var TIKTOK_OEMBED_BASE_URL = "https://www.tiktok.com/oembed";
var fetchRetry$1 = fetchRetry(window.fetch);
function TikTok(_a) {
...
    useEffect(function () {
        fetchRetry$1(TIKTOK_OEMBED_BASE_URL + "?url=" + url)
            .then(function (res) { return res.json(); })
...
}

export { TikTok };
//# sourceMappingURL=index.es.js.map

I have tried this :

if(isBrowser)
{
  var fetchRetry$1 = fetchRetry(window.fetch);
}

but didn't work eventually , any idea ??

Try solutions from this: https://www.gatsbyjs.com/docs/debugging-html-builds/ — Gilbish Kosma, Aug 09 '22 at 20:59
Can you try something like this? const isBrowser = typeof window !== `undefined`; if (isBrowser) { var fetchRetry$1 = fetchRetry( window.fetch ); } — Kostas Minaidis, Aug 09 '22 at 21:01
@Mike Please check the code again , I have edited the code about importing the component in lazy load — olorin viggo, Aug 09 '22 at 21:22
The error `window not available during ssr` is correct as @KostasMinaidis has mentioned , wrap your `window` logic in `if(typeof window !== undefined) { // logic `. Window is not present in SSR — Oliver Heward, Aug 10 '22 at 15:53

error "window" is not available during server side rendering

0 Answers0