I'm in the process of updating my app from React 17 to React 18 (it is a CRA app, if that matters). I'm using react-helmet-async to put together the head tags. However, now when I try to run the app I get this error:
Module not found: Error: Can't resolve 'react-helmet-async'
I gather from the fact that react-helmet-async is missing from my package.json file that the library was formerly packaged with React or another library I'm using and no longer is. I know I could add it to my package.json file but if there is a more idiomatic way to achieve the same thing in React 18, I'd rather do it that way.
There is a guide here on upgrading this stuff to React 18, however, I'm so far from understanding anything written in there that I don't even know where to start figuring out what I need to do.
My app has a pretty standard use case and doesn't include any nested Helmet components or anything like that. It also doesn't use server-side rendering (although I'm planning to implement that in the near future, so it would be good to use an approach that is compatible with SSR). The actual code in my project is broken up over multiple components but amounts to this:
import { Routes, Route, BrowserRouter as Router } from 'react-router-dom'
import { HelmetProvider, Helmet } from 'react-helmet-async'
const pages = [/* array of objects */]
const App = () => {
<Router basename={process.env.PUBLIC_URL}>
<HelmetProvider>
{pages.map(
({ pageId, title, description, jsx, path }) => {
return(
<Route exact path={path} key={pageId}>
<Helmet>
<html lang='en'>
<title>{title}</title>
<meta name='description' content={description} />
</Helmet>
<AppProvider>{jsx}</AppProvider>
</Route>
)
}
)}
</HelmetProvider>
</Router>
}
If anyone could help me understand what I need to do to migrate away from react-helmet-async and on to whatever the React 18 way is, it would be much appreciated.