Hooks Invariant Error, as ReactSharedInternals is unable to be set (Static Website Only)

[nmccready]

First off amazing library!

From what it appears one is unable to to currently use any component utilizing hooks with x0 when producing the static website. This works wonderfully via webpack dev server yarn xo docs.

After much digging I have determined that the code base is indeed using the same react versions 16.8.6 everywhere. However, the trip is that react is pre-bundled from within the webpack bundle. Therefore when build.js is calling react-dom/server renderToString they are not utilizing the same React memory instance as webpack (client side) and server side (build.js) have their own. This yields to the client side's React never getting ReactSharedInternals being set which in turn yields the null hook dispatcher.

The only possible work around I can think of is forcing react and react-dom to be external resources. via

const { NODE_ENV } = process.env;

console.warn({ NODE_ENV });

const externals =
  NODE_ENV !== 'production'
    ? {}
    : {
        react: 'react',
        'react-dom': 'react-dom',
      };

module.exports = {
  externals,
};

But with this accomplished how do we inject / eval the server side (build.js) version of react into the webpack bundle.

I will happily provide more details if needed.

As a side not this is specifically related to many issues which resolve to facebook/react#14022 .

[nmccready]

Ok so I figured out a horrid workaround.

some.mdx

const { ReactCurrentDispatcher } = React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;

<div>
  {ReactCurrentDispatcher.current == null ? <div>Can't show form, hooks issue.</div> :
    <SomeHookComponent ..../>
  }
</div>

This get's us by the hooks react-dom server rendering fiasco and still lets the react component work client side later.