react-helmet: Using `react-router@2.0.1`, `Helmet.rewind()` doesn't give the expected results

In the following snippet, when rendering on the server:

let rendered = ReactDomServer.renderToStaticMarkup(
        <RouterContext {...renderProps} />);
let head = Helmet.rewind();
const html = `
    <!doctype html>
    <html>
        <head ${head.htmlAttributes.toString()}>
            ${head.title.toString()}
            ${head.meta.toString()}
            ${head.link.toString()}
        </head>
        <body>
            <div id="content">
                // React stuff here
            </div>
        </body>
    </html>
`;

the value of html is:

  <!doctype html>
  <html>
      <head >



      </head>
      <body>
          <div id="content">
              // React stuff here
          </div>
      </body>
  </html>

… so basically all the toString()s simply output empty strings. The rest of the rendering is OK, with all my components rendering as they’re are expected to.

Is there anything wrong with my snippet above?

About this issue

Original URL
State: closed
Created 8 years ago
Reactions: 1
Comments: 18 (2 by maintainers)

Most upvoted comments

I ran into a similar issue, but @bguiz’ guidance led me to the solution. I was importing react-helmet in my app’s Webpack build, then importing a separate instance in its server-side code. The fix that worked was to reexport Helmet from the Webpack entrypoint, then import that particular instance into the server code along with the rest of my app. Hope that’s useful to anyone else who stumbles across this issue! Thanks for the insight @bguiz.

phyllisstein on Dec 13, 2016

OK, so I’ve got to the bottom of this issue (at least in my case)… it was that Helmet.rewind() is a static method call, which is totally fine if you only include it in one place as a dependency. If there’s more than one, swap it over to peerDependencies - or otherwise ensure that you are using the same instance - and works as expected.

Not sure if the cause is the cause is the same for you, @madpilot and @yukulelix but I’m closing this issue. Ask @doctyper to re-open if this is the case!

W: http://bguiz.com

bguiz on Apr 11, 2016

I had exactly the same problem with React router v4 with SSR.

THIS WAS A LIFESAVER!!!

in my ./Application.js which is wrapped by a browser-router for the web and a static router for the server,

did: export const AppHelmet = Helmet

and used that all over the app and also for where I did AppHelmet.renderStatic()

raubas on May 31, 2017

@asiniy The root cause of the problem (at least for me) was that there are multiple instances of react-helmet being loaded. Therefore any global static state would have multiple copies, and behave incorrectly. In my case, the solution was to ensure that there was only one copy of react-helmet in my dependency graph, and I achieved this using peer dependencies. The solution in your case may not be the same, but you might have some luck by making sure to remove all but one copy of react-helmet.

bguiz on Nov 1, 2016

My guess is that it doesn’t support the mew react-router yet On 6 Apr 2016 21:00, “Myles Eftos” notifications@github.com wrote:

I’m also seeing this bug. When the same code renders client side, it works fine.

— You are receiving this because you authored the thread. Reply to this email directly or view it on GitHub https://github.com/nfl/react-helmet/issues/125#issuecomment-206310474

bguiz on Apr 6, 2016