Not properly working with new React18 root-api

[dersimoezdag]

I want to report a bug

On the new root-api (reactwg/react-18#5) react-helmet does not always properly set the meta-tags.

Using react-dom@18.0.0-rc.0-f2a59df48-20211208
and react-helmet@6.1.0

I'm not sure if it's related to react-helmet or the current react alpha. But the issue is only noticeable on the new root-api, not when using the old render method on the current alpha.

[felixh10r]

i can confirm this is an issue with stable react 18 root api. is this project actively maintained? i'd be happy to open a PR if desired.

[wongchichong]

I had used the root api 18 with react-helmet@6.1.0

import { createRoot } from 'react-dom/client'

const root = createRoot(document.getElementById("root"))
root.render()

found that some of the tags previously added by helmet will be removed by others nested helmet.
but when revert back to old syntax with react 18

render(, document.getElementById("root"))

the problem disappeared.

I can't replicate this problem in simple project in codesandbox, because react router involved.

[PaulMest]

Seems like this is a fork that has more traction and is more actively maintained: https://github.com/staylor/react-helmet-async

[eyerean]

Maybe something like that could be used instead, if you don't want to replace packages:

import * as React from 'react';
import {Helmet as ReactHelmet, HelmetProps as ReactHelmetProps} from 'react-helmet';

interface HelmetProps extends ReactHelmetProps, React.PropsWithChildren {}

const Helmet = (props: HelmetProps) => <ReactHelmet {...props} />;

[eugeniosegala]

I "solved" this problem by adding a key to the Helmet wrapper.

Something like:

<Helmet key={id}>
...
</Helmet>

Not a real solution but only a temporary workaround.

You can also probably add the key only to the single tag that needs to be refreshed 🤞