question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Using provided example - Uncaught Error: Helmet expects a string as a child of <title>.

See original GitHub issue

Using the first example in the readme.md

import React from "react";
import {Helmet} from "react-helmet";

class Application extends React.Component {
    return (
        <div className="application">
            <Helmet>
                <meta charSet="utf-8" />
                <title>My Title</title>
                <link rel="canonical" href="http://mysite.com/example" />
            </Helmet>
            ...
        </div>
    );
};

I get:

Uncaught Error: Helmet expects a string as a child of <title>. Did you forget to wrap your children in braces? ( <title>{``}</title> ) Refer to our API for more information.
at HelmetWrapper.warnOnInvalidChildren

Even if I change it to

<title>{'My Title'}</title>

I get the same issue

Any ideas?


Edit see workaround below: https://github.com/nfl/react-helmet/issues/274#issuecomment-345241784

Issue Analytics

  • State:open
  • Created 6 years ago
  • Reactions:14
  • Comments:10 (1 by maintainers)

github_iconTop GitHub Comments

27reactions
atulmycommented, Nov 17, 2017

I encountered similar problem with following code:

<Helmet>
    <title>Product - { item.name }</title>
</Helmet>

Fixed using string literal

<Helmet>
    <title>{ `Product - ${ item.name }` }</title>
</Helmet>
4reactions
mikedpadcommented, Dec 8, 2018

Would love it if nodes were allowed as well. It just seems a bit silly at the moment. It’s not that much more, but the first is much easier to read.

Right now, I have to turn this:

<Helmet>
  <title>Default Title{subtitle && `: ${subtitle}`}</title>
</Helmet>

Into this:

<Helmet>
  <title>{subtitle ? `Default Title: ${subtitle}` : `Default Title`}</title>
</Helmet>
Read more comments on GitHub >

github_iconTop Results From Across the Web

Helmet expects a string as a child of <head>. Did you forget to ...
It didn't appear until I ran my local server. Was working fine prior. Error: Helmet expects a string as a child of <head>....
Read more >
Helmet expects a string as a child of <head>. Did you forget to ...
Coding example for the question Helmet expects a string as a child of . Did you forget to wrap your children in braces-Reactjs....
Read more >
react-helmet - npm
Supports attributes for body , html and title tags. Supports server-side rendering. Nested components override duplicate head changes. Duplicate ...
Read more >
React Helmet - Yifei's Notes
奇怪的bug. 在元素中直接使用html 字符串拼接会报错,使用JS 的字符串差值就可以,醉了。 Helmet expects a string as a child of <title>
Read more >
A Guide to Common React Errors
The fix: Render a valid React child like a string, an array, null, or DOM node. function App() {. const ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found