Error if trying to use library before body is found about notyf

[caroso1222]

Does preact pre-render have something like a "mount" lifecycle? some hook where you can specify "don't run this in the server, just run it on the client"? I think there are several libraries that uses the document directly, you might want to check how preact pre-render handle such libraries.

[caroso1222]

Hey! Hmm good catch. Just wondering, why do you need it to work on the head? scripts like this library are generally meant to be placed on the body bottom so that it doesn't block initial rendering and can also make use of the body.

Can you please give a bit more context on why you need it on the head? Maybe there's another way around.

[ispal]

It's just in my local development setup (CMS site). I have it in the head because otherwise there's a flash of unstyled content. I have a webpack dev server in use and the styles are injected when the script is executed. It's a minor issue but still a bit annoying 😄. It's kind of my issue maybe now when I think. I just wanted to let you know.

[bsecker]

@ispal how did you end up fixing this?

FWIW, I get a similar error too using preact with pre-rendering:

Unable to read file: project-path/src/node_modules/notyf/notyf.es.js

ReferenceError: document is not defined
method: null
at: project-path/src/node_modules/notyf/notyf.es.js:120:22

Source code:


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/developit/preact-cli#pre-rendering for further information.npm ERR! code ELIFECYCLE

Running preact build --no-prerender as suggested does fix this problem, but the same thing happens as with @ispal where there's a flash of unstyled content.

@caroso1222 do you have any ideas?

Cheers