jonasbuntinx/next-purescript-example

Next.Head is malfunctioning on CSR

Closed this issue · 4 comments

idfunctor commented

Really new to PureScript. Using this example as a base to learn-by-building so forgive me if this is something obvious with a small fix.
At the https://next-purescript-example.netlify.app/ as well on my localhost; you will see that "Next.js with Purescript Example" in the Document title is actually only flashing for a bit before it disappears. In the "view source" (SSR) you'll see the correct title but somehow when client side react gets hydrated it goes blank.

Not good enough at PureScript to be able to submit a fix, but I hope this is something small!

idfunctor commented

Update: I have diagnosed the issue further and here are my findings.
image

I basically switched the Head component to a TypeScript file to see what's going on.
The log at the top that says props: {children: "hey you!"} is from PureScript; when we give
{ children: [ R.title { children: [ R.text "hey you!" ] } ] } these props to Next.Head.
Take a note of the type property's value in that log. It's a function.

The log under it is TypeScript, console.log(<title>hey there</title>)
You can see that the type property's value in this case is "title".

image

I suspected this difference to be the reason why next/head is breaking and emptying the title. To verify my suspicion; as in the above screenshot, if I uncomment the line that mutates props.children to change the title prop to a string, everything works!

So I guess my question is:
Is there a way for us to use PureScript to generate an element with string type instead of a React function?

idfunctor commented

I replaced the whole thing with react-helmet, and it did work because react-helmet took the "title" prop. However, rendering children failed there as well; because next/head also uses React helmet (or is based on it). At least switching to react-helmet gave me a descriptive error that helped corroborate that giving React components as children is causing the bug.
nfl/react-helmet#326

jonasbuntinx commented

Sorry for not responding up until now, somehow your issue slipped under my radar.

I noticed a similar issue while working on another project using PureScript and Next.JS.

I fixed it for this repo in: b348450

Does this fix the issue for you as well?

  • 🎉1
i-am-the-slime commented

@jonasbuntinx Do you have some example use of Next.Head? This example only uses Document.Head and I'm struggling with the Next.Head one. There always seems to be an empty <title> that overrides mine.

Edit:
Sorry, looks like things are fine now with the changes to Head.js I just didn't delete enough output and .spago folders ❤️

  • 👍2