Closed idfunctor closed 2 years ago
Update: I have diagnosed the issue further and here are my findings.
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".
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?
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. https://github.com/nfl/react-helmet/issues/326
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: https://github.com/jonasbuntinx/next-purescript-example/commit/b3484506cbf9578fb806e38e0b38db6eaa0a5d65
Does this fix the issue for you as well?
@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 ❤️
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!