Next.js: TypeError: Cannot read property 'join' of undefined
This occurs only when including preact.
Steps to reproduce:
- Run the preact example app
- Add nextjs's Head helper element to a page
- Give the page a title; then that happens.
The problem arose from the header-manager's method(updateTitle). Preact's VNode exposes just attributes to props with no children, the VNode itself exposes children.
ooade
All 19 comments
I'll have a look 馃憤
timneutkens
on 28 Jan 2017
Ok I get what you mean. We read component.props.children which is set in React, but not in preact. in preact it's component.children Looks like something that would have to be added to preact-compat. I'll check that now 馃憤
timneutkens
on 28 Jan 2017
Looks like it's handled here already 馃 https://github.com/developit/preact-compat/blob/master/src/index.js#L109
@developit could you have a look? 鉂わ笍
timneutkens
on 28 Jan 2017
@timneutkens I just checked and I'm not sure I can reproduce the above issue - here's the JSFiddle I set up: https://jsfiddle.net/developit/n144pt7m/
I might be going about the repro wrong though!
FWIW I'm not sure L45 of <HeadManager> accounts for the case where a single element is passed. In React (and thus in preact-compat), that will result in props.children being a reference to the Virtual DOM Element, rather than an Array.
That is to say, this line:
typeof children==='string' ? children : children.join('')
...if rendered like this:
<HeadManager><AnyThing /><HeadManager>
... will throw an exception, because children is an Object (VNode), not a String or Array.
It seems like this would be an issue when running under React as well, since preact-compat's behavior here is just mimicking React's. Adding an Array check before the join would at least circumvent any exception.
developit
on 28 Jan 2017
That is a fair point, we will have to update that. The most minimal example where I can reproduce this is this: https://github.com/timneutkens/next-issue-910. In this case, props.children is undefined. That's why it logs an error.
timneutkens
on 28 Jan 2017
Ah perfect @timneutkens that gives me a great repro. It looks like the bit that adds props.children is only being applied to Component vnodes, not element VNodes. We can remedy that quickly :)
developit
on 28 Jan 2017
Much appreciated 鉂わ笍
timneutkens
on 28 Jan 2017
Should be fixed in [email protected]
developit
on 28 Jan 2017
Thank you very much @developit 馃憤 馃挴
timneutkens
on 28 Jan 2017
Thanks @developit
ooade
on 28 Jan 2017
Just confirmed using your repro (thanks again btw!) that it is in fact working now:
developit
on 29 Jan 2017
@developit confirmed it too 鉂わ笍
timneutkens
on 29 Jan 2017
Great, thanks a million for surfacing this Tim!
developit
on 29 Jan 2017
I am seeing this with:
- React 15.6.1
- React DOM 15.6.1
- Next.js 3.2.2
I want to have a page title containing a bullet character (•). If I do:
<Head><title>foo • bar</title></Head>
... then the title appears as "foo • bar" because the • gets escaped to &bull;.
When I switch to:
<title dangerouslySetInnerHTML={{ __html: "foo • bar" }} />
... the title is set correctly, but this error starts appearing in the browser console, ostensibly because <title></title> has no children at all?
atuttle
on 26 Sep 2017
ping @timneutkens @rauchg
atuttle
on 9 Nov 2017
@atuttle I am running on the same issue with updating title tag. Did you find a fix or workaround please ? tanks in adavnce
donaminos
on 9 Mar 2018
I'm seeing this issue whenever I navigate on the client-side. If I do a refresh it doesn't occur and the title of the page is correct.
Irrelon
on 2 May 2018
@donaminos no, no solution or workaround has been provided yet. It's possible that this is not a problem in a more recent version of Next, but I haven't had the chance to upgrade yet. I am just not using any HTML entities in my title, as annoying as that is.
atuttle
on 25 Jun 2018
Does this have any ramifications, or can it be treated as a warning for now? I am using dangerouslySetInnerHTML to unescape special characters in the page's server render, which I suppose isn't a huge deal if I were to stop using it. But I'd prefer to have nice clean titles for the Google.
danjebs
on 11 Oct 2018
Related issues
irrigator
路
3Comments
sospedra
路
3Comments
renatorib
路
3Comments
kenji4569
路
3Comments
pie6k
路
3Comments
Most helpful comment
Just confirmed using your repro (thanks again btw!) that it is in fact working now:
