Invariant failed in HeadTags about react-head

[casertap]

This is the React tree on my dev env:

[casertap]

For some reasons the React Context did not make it to the HeadTag component, making this line fail:

react-head/src/HeadTag.js

Line 30 in b294fa7

invariant(headTags, '<HeadProvider /> should be in the tree');

Now I am using the redux (provider) with the connect method (consumer) on server side without any issue.

[TrySound]

Could you try to wrap all other providers with HeadProvider? There can be a conflict between old and new context apis.

[casertap]

I am also trying react-helmet-async and I also got some weird errors.

I am doing something a little unconventional on the server side and this might be the issue.
I have an universal folder a client folder and a server folder.
On the server side I using babel alone to transpile the few js files in the server folder but then I use webpack to build the universal bundle (on the server side).
The entry point it a top level component called Routes.

my server.js file just require the build component like that:

  const Layout = require("../../build/Routes.js").default

And then I use this top level component like this:

 const rootComponent = PROD ? (
      <IntlProvider locale={locale} messages={messages[locale]}>
        <Provider store={store}>
          <HeadProvider headTags={headTags}>
            <StaticRouter location={location} context={context}>
              <Layout />
            </StaticRouter>
          </HeadProvider>
        </Provider>
      </IntlProvider>
    ) : null;

My transpiled server will still use the node_modules folder during runtime.
While my Routes bundle will include it own node_modules js file within the bundle.

Can you tell me if you think this is an issue?
Because from what I understood the React.Context should be the same (it is kind of statefull).

[casertap]

Now this should work though, but it doesn't:
on server.js

    const Layout = require("../../build/Routes.js").default
    const headTags = [];
    const rootComponent = PROD ? (
      <IntlProvider locale={locale} messages={messages[locale]}>
        <Provider store={store}>
          <StaticRouter location={location} context={context}>
            <HeadProvider value={{headTags: headTags}}>
              {[
                <Title>Search</Title>,
                <Meta name="description" content="Some Search" />,
                <Meta property="og:title" content="Search" />,
                <Meta property="og:image" content="path/to/search.jpg" />,
                <Layout />,
              ]}
            </HeadProvider>
          </StaticRouter>
        </Provider>
      </IntlProvider>
    ) : null;
    const markup = ReactDOMServer.renderToString(rootComponent);

fail with: invariant failed again

(node:4316) UnhandledPromiseRejectionWarning: Error: Invariant failed
    at index (/home/pc/Documents/funspace/babysearch/isomorphic-react-redux-saga-ssr/node_modules/tiny-invariant/dist/tiny-invariant.cjs.js:13:11)

[casertap]

@TrySound
I tried to wrap my HeadTags with a HeadProvider within the universal components but I still ge the same error

[TrySound]

This error looks like you have two instances of head context. Make sure you use one instance in server side. Try to put console.log in react-head/dist/index.cjs.js and react-head/dist/index.esm.js and then run your app.

[oyeanuj]

@casertap What solution did you end up with here?

[TrySound]

@oyeanuj Add HeadProvider in the root of the tree like said in docs.