preact-cli
preact-cli copied to clipboard
"ReferenceError: document is not defined" - Where?
Hi, I'm getting the same error during the build even if I remove all the code that is possibly can ask for a window/document - I've tried to remove all the components except main screen. The error is next:
"ReferenceError: document is not defined at folder-with-this-project\build\ssr-build\ssr-bundle.js:1:438"
Reproduction
Here is my package: https://github.com/RomanistHere/RomanistHere.github.io/blob/preact/package.json It's actually one from my-project example with few more dependencies - I'm trying to migrate app from React. I mean I succeeded if don't talk about pre-rendering part. I type "npm run build"(preact build)
Steps to reproduce
it fails here: "93% (14.4s) after chunk asset optimization"
Expected Behavior
I expect to see the file with this error at least
Actual Behavior
Getting error in ssr-bundles - can't understand what I should fix
Hey, I'll move this to preact-cli
since this seems related
Hey, I'll move this to
preact-cli
since this seems related
Thank you
The actual error comes from mini-css-extract-plugin
, but your issues arise from your router. Dynamically importing components by their file path evidently causes some issues. Changing this to a more conventional router makes the error you're seeing disappear.
However, you still have a few things to fix before you can prerender, as you have not wrapped you usage of localStorage
in a window check and something called react-tilty
also is not wrapped. These should likely be quick to fix though.
The actual error comes from
mini-css-extract-plugin
, but your issues arise from your router. Dynamically importing components by their file path evidently causes some issues. Changing this to a more conventional router makes the error you're seeing disappear.However, you still have a few things to fix before you can prerender, as you have not wrapped you usage of
localStorage
in a window check and something calledreact-tilty
also is not wrapped. These should likely be quick to fix though.
Thank you. Question, how do you know this and I'm not? I mean there is no pointers how do I resolve. If I remember right, when I tried to build the same app with Gatsby there were notes what issues I have to fix in order to make it work
Standard debugging procedure: take things apart from the top down.
Router was basically the first stop, and your method of doing so was quite bizarre, so it was something I definitely had to check. Any reason why you're doing it that way?
Once I got around that the rest of the errors showed up.
Just to add, as I see you're new to Preact, it can and will offer debugging help. This is an issue with the underlying webpack plugin having issues with your code, however, so there's no much that can be returned to you. I'm not sure what entirely sets it off but that router sure isn't liked by something.
I was just playing with Preact, I'll definitely do refactor my router back. Thank you for your help
And how do I fix mini-css plugin error? Can we config Preact to skip window/document no safe dependencies on prerender?
I also would like to know the way you can debug Preact. Is there any article on this one?
Thank you again :) And sorry that I'm bothering you with this silly questions? It's two days since I know Preact exists
Oh it's certainly no problem. Let me know if a minor PR could help.
And how do I fix mini-css plugin error?
The router should be altered/refactored, that should stop the main issue. Dynamically importing isn't very idiomatic and isn't saving you any complexity by any means, so while it'll take someone much smarter than myself to point out what the underlying problem actually is with the tooling, switching up your router will make it go away for sure.
Can we config Preact to skip window/document no safe dependencies on prerender?
If by this you mean can you tell Preact to just ignore those things, then no. That's one of the difficulties of prerendering, not everything is there during the prerender.
Is there any article on this one?
There's the dev tools browser extension that can help you when you can run the app, but I'm not aware of any one article in particular that might be of use.
No need to apologize for asking questions, certainly a valid enough issue. I've asked my fair share of questions (and then some) around here. Happy to help more if you could use it, or feel free to ask any of the other contributors. I'm sure they'd be happy to help out too.
Edit: Spoke a bit too soon, there might be some solutions out there to help with prerendering
https://github.com/RomanistHere/RomanistHere.github.io/commit/bd6183b513a55b3e1ad8fd77723a37c86533d769 - I fixed all the issues we've talked above, building keeps failing. How should I fix third-party issues with globals?
There was solution I've found for Gatsby for example:
exports.onCreateWebpackConfig = ({ stage, loaders, actions }) => { if (stage === "build-html") { actions.setWebpackConfig({ module: { rules: [ { test: /bad-module/, use: loaders.null(), }, ], }, }) } };
I sent you a PR, figured I had it already and it better outlines what I mean. Take a look if you have a chance. Definitely don't feel the need to merge it or anything.
As for globals, maybe that's where something like window-or-global
can step in? Sorry, I have staggeringly little experience in that area. It might be worth opening a separate issue for that if you can't figure out something reasonable.
Hiya - this is almost certainly caused by the react-html-parser
library you're using here:
https://github.com/RomanistHere/RomanistHere.github.io/blob/3a08995fdf2fce84c8077ad713dcf1cdae1e4aae/src/pages/Post/Post.js#L45
There's not much benefit in that library given that it doesn't sanitize HTML. You could remove the library entirely and replace that line with this:
<div className="post__text" dangerouslySetInnerHTML={{ __html: content }} />
dangerouslySetInnerHTML
It's actually not, was related(and still is) to async routes. I can't figure a way to build async routes with pre-rendering. When I change routes to static ones, it's building just fine. I don't know what to do with it.
But anyway this line of code is very useful. If it's doing the same the package does, I will remove it completely, thank you :)
I renamed my page folder to "routes" according to documentation but started to get new error here when build with pre-rendering:
ReferenceError: document is not defined
method: null
at: undefined:null:null
Source code:
× ERROR TypeError [ERR_INVALID_ARG_TYPE]: The "chunk" argument must be of type string or an instance of Buffer. Received undefined
at validChunk (_stream_writable.js:281:10)
at WriteStream.Writable.write (_stream_writable.js:316:21)
at handlePrerenderError (...\node_modules\preact-cli\lib\lib\webpack\prerender.js:111:18)
And if I use "async!" with pages folder, content in page is doubling
What could be the solution?
P.S.
I removed reactHtmlParser completely, thank you