Preact "ReferenceError: window is not defined"

Question

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

If --no-prerender solves your issue, what exactly is the question? — Szigeti Péter
– Szigeti Péter, Commented Feb 5, 2023 at 15:48
@SzigetiPéter They want to avoid the need to disable prerendering, clearly. — rschristian
– rschristian, Commented Feb 5, 2023 at 23:37

Anna Drzewiecki · Accepted Answer · 2023-02-07 07:00:41Z

1

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

answered Feb 7, 2023 at 7:00

Anna Drzewiecki

951 silver badge3 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

rschristian · Accepted Answer · 2023-02-06 05:56:33Z

0

preact-cli prerenders your app in Node, where browser globals (such as window) do not exist.

If you've added a window check but are still getting the same error, that means you have other code also trying to access window. Each offending use will need to be wrapped in a window check if you want to prerender your app.

If you want to make a discussion on the preact-cli repo and provide your app, I can try to take a look.

Edit: The issue is in an upstream dependency of axios, form-data. This has an unsound browser vs Node check, meaning any use of axios at all will throw an error. The simplest solution would be to patch form-data/lib/browser.js with the following snippet:

module.exports = typeof self == 'object' ? self.FormData : typeof window !='undefined' ? window.FormData : undefined;

https://github.com/preactjs/preact-cli/discussions/1784

edited Feb 6, 2023 at 5:56

answered Feb 5, 2023 at 23:40

rschristian

3,1701 gold badge12 silver badges26 bronze badges

2 Comments

Anna Drzewiecki Over a year ago

the window check doesn't work at all, commenting out the code or writing something like if(1+1 == 3) instead of if(typeof window !== 'undefined') works. Will make a discussion on the preact-cli repo in a bit, thanks!

rschristian Over a year ago

That would only happen if something's defining window, which is rather horrifying and very bad for any build tool, not just preact-cli. Basically you're just looking for a condition that's only true in a browser, so Node skips it. window is the standard, but there are other things you could test against too to varying degrees of success (some of those conditions are commonly polyfilled, so effectiveness depends a bit on what you're using).

Collectives™ on Stack Overflow

Preact "ReferenceError: window is not defined"

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related