Search code examples
server-side-renderingprerenderpreact

Preact "ReferenceError: window is not defined"


I'm trying to use a web API in my Preact app and can't seem to find a workaround for this error

Build  [=================== ] 93% (10.2s) after chunk asset optimization
ReferenceError: window is not defined
method: UqHU

Stack:

{
    "fileName": "D:\\preact-app\\build\\ssr-build\\ssr-bundle.js",
    "lineNumber": 1,
    "functionName": "Object.UqHU",
    "methodName": "UqHU",
    "columnNumber": 93549,
    "native": false
}
This is most likely caused by using DOM or Web APIs.
Pre-render runs in node and has no access to globals available in browsers.

Consider wrapping code producing error in: "if (typeof window !== "undefined") { ... }"

Alternatively use "preact build --no-prerender" to disable prerendering.

See https://github.com/preactjs/preact-cli#pre-rendering for further information.

I have tried "if (typeof window !== "undefined")" but still getting the same error. Commenting out the code or using --no-prerender solves it


Solution

  • The problem came from the import of axios, which depends on the "form-data" library and is not compatible with Preact prerendering as far as I understand. I chose to use fetch instead of axios to fix this but rschristian gives more solutions in this post: https://github.com/preactjs/preact-cli/discussions/1784