search

nfl / react-helmet

A document head manager for React
MIT License
17.34k stars 660 forks source link

Multiple `<Helmet>` tags will break (only one will render) #683

Open matthew-dean opened 2 years ago

matthew-dean commented 2 years ago

Do you want to request a feature or report a bug? Bug

What is the current behavior? A component has a <Helmet> component tag inside it. That component is rendered along-side another <Helmet> tag. However, the contents of only one <Helmet> tag will render.

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn't have dependencies other than React and react-helmet. Paste the link to your JSFiddle (https://jsfiddle.net/Luktwrdm/) or CodeSandbox (https://codesandbox.io/s/new) example below: https://codesandbox.io/s/sparkling-dust-qc0zgn?file=/src/index.js

What is the expected behavior? The contents of both <Helmet> tags will render

Which versions of React and react-helmet, and which browser / OS are affected by this issue? Did this work in previous versions of React and/or react-helmet? React 16.14.0 / React-Helmet 6.1.0

matthew-dean commented 2 years ago

Additional context -- I've checked this with React 17 and the issue persists. React 18 didn't seem to have the issue, but we're not ready to upgrade to React 18.

matthew-dean commented 2 years ago

I think this may be a bug related to this feature:

Nested or latter components will override duplicate changes

In this case, these are not duplicates but are completely unique tags. But they are obliterated by the later <Helmet> call.

derzierau commented 2 years ago

+1 same for us. In our case our site uses react-helmet and we have a web component running inside of it using also react-helmet. It initially renders the main site helmet tags and deletes them when the web component is rendered.