"ReferenceError: document is not defined" - Where?

[RomanistHere]

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

[JoviDeCroock]

Hey, I'll move this to preact-cli since this seems related

[RomanistHere]

Hey, I'll move this to preact-cli since this seems related

Thank you

[rschristian]

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.

[RomanistHere]

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.

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

[rschristian]

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.

[RomanistHere]

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

[rschristian]

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

[RomanistHere]

RomanistHere/RomanistHere.github.io@bd6183b - 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(), }, ], }, }) } };

[rschristian]

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.

[developit]

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 }} />

[RomanistHere]

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 :)

[RomanistHere]

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