Fix React SSR hydration mismatch for objects of other realms

[slorber]

data instanceof Object is not always reliable, and returns false on edge cases such as objects coming from other realms

On the Docusaurus site, we have such objects. For example our docusaurus.config.js file is rendered by this lib on both the server at build time (SSG in Node.js) and in the client:

https://docusaurus.io/__docusaurus/debug

On Node.js it is rendered as [object Object] because it is neither an object/array, neither a primitive so it defaults to data.toString() and gets collapsed by default Node.js behavior.

You can see this on initial page load before hydration, or by disabling JS:

After React hydration, it renders fine, but there's an hydration mismatch warning:

Docusaurus React Root onRecoverableError: Error: Minified React error #418; visit https://react.dev/errors/418?args[]= for the full message or use the non-minified dev environment for full errors and additional helpful warnings.

---

In our case, we are using Jiti to load/transpile our config file: https://github.com/unjs/jiti

Here's a simpler repro case to obtain such object in Node.js:

const vm = require('vm');

// Create a new context (another realm)
const context = vm.createContext({}); // Empty sandbox

// Create an object in the new context
const obj = vm.runInContext('({ key: "value" })', context);

console.log(obj); // { key: 'value' }

// Verify it's from another realm
console.log(obj instanceof Object); // false (different realm)

Note there's a ShadowRealm proposal in the process of being standardized for browser usage.

---

I believe this lib should support this use-case better and not lead to hydration mismatches by default. typeof data === "object" is more reliable.

However, maybe it introduces other edge cases? I don't really know but in my case, I didn't see any: this change fixes our hydration error and the lib keeps working properly.

[AnyRoad]

Seems like you are right and typeof data === "object" is more reliable. Thank you!