.currentDispatcher gets set to null when calling ReactDOMServer from ReactDOM

I happened to notice that React will throw Hooks can only be called inside the body of a function component if a sibling element calls ReactDOMServer.renderToStaticMarkup. I have a fiddle that shows this behavior (I think you need to manually open your console to see the error).

If you wrap the sibling element in a component or even just assign it a variable, this issue does not occur.

It’s easy to get around and is a pretty specific bug, but why might this be happening?

[edoardo-bluframe]

Hey everybody!

Still same error!

I upgraded react, react-dom, react-apollo and everything else to latest yesterday

Then I decided to try useState again and…

As soon as I do SSR hydrate in production it breaks

SSR load works 100% a-okay, and as soon as we hydrate we get a blank page and invariant violation

This is has been happening for months now!

And this issue is already referenced from #13972

I cannot believe it is so edge-case that we cannot fix it??

[edoardo-bluframe]

Hey guys!

Still having this error - I think it’s this! - on react@16.8.2, SSR, and react-apollo@2.4.1

SSR works fine and the error throws on React.hydrate

Also I am using react-loadable@5.5.0

Here is my index.js

// @flow
/* eslint-disable react/jsx-max-depth */

import "intersection-observer"
import { ApolloProvider } from "react-apollo"
import App from "./app"
import { AppContainer } from "react-hot-loader"
import { BrowserRouter } from "react-router-dom"
import Loadable from "react-loadable"
import React from "react"
import ReactDOM from "react-dom"
import graphql from "api"

const app = document.getElementById("app")

const shell = Component => (
  <ApolloProvider client={graphql}>
    <AppContainer>
      <BrowserRouter>
        <Component />
      </BrowserRouter>
    </AppContainer>
  </ApolloProvider>
)

const render = Component => {
  if (app !== null) {
    // eslint-disable-next-line no-process-env
    if (process.env.NODE_ENV === "development") {
      ReactDOM.render(shell(Component), app)
    } else {
      Loadable.preloadReady().then(() => {
        ReactDOM.hydrate(shell(Component), app)
      })
    }
  }
}

render(App)

// Webpack Hot Module Replacement API
if (module.hot) {
  module.hot.accept("./app", () => {
    // eslint-disable-next-line global-require
    render(require("./app").default)
  })
}

Is anybody else having a similar problem? 😄