Я пытаюсь использовать веб-API в своем приложении Preact и не могу найти обходной путь для этой ошибки.
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.
Я пробовал «if (typeof window !== «undefined»)», но все равно получаю ту же ошибку. Комментирование кода или использование --no-prerender решает эту проблему.
🤔 А знаете ли вы, что...
Preact предоставляет инструменты для тестирования компонентов и приложений.
preact-cli выполняет предварительную визуализацию вашего приложения в Node, где глобальные параметры браузера (такие как window) не существуют.
Если вы добавили проверку окна, но по-прежнему получаете ту же ошибку, это означает, что у вас есть другой код, который также пытается получить доступ к window. Каждое оскорбительное использование должно быть обернуто проверкой окна, если вы хотите выполнить предварительную визуализацию своего приложения.
Если вы хотите обсудить репозиторий preact-cli и предоставить свое приложение, я могу попытаться взглянуть.
Обновлено: проблема заключается в восходящей зависимости axios, form-data. Это ненадежная проверка браузера и узла, а это означает, что любое использование axios вообще вызовет ошибку. Самым простым решением было бы исправить form-data/lib/browser.js следующим фрагментом:
module.exports = typeof self == 'object' ? self.FormData : typeof window !='undefined' ? window.FormData : undefined;
https://github.com/preactjs/preact-cli/discussions/1784
Проблема возникла из-за импорта axios, который зависит от библиотеки «form-data» и несовместим с предварительным рендерингом Preact, насколько я понимаю. Я решил использовать fetch вместо axios, чтобы исправить это, но rschristian дает больше решений в этом посте: https://github.com/preactjs/preact-cli/discussions/1784