Problem with import react-json-view

[igorwessel]

Good afternoon!

I'm just trying to use a lib that works only on the client but I can't understand why it's giving error with the imports, sandbox with error reproduction:
https://codesandbox.io/s/keen-lederberg-ey6g1?file=/app/routes/index.jsx

I tried to use the ClientOnly component but without success.

[hollandThomas]

A couple of things

react-json-view references document 7 times. Doing so leads to errors when using SSR with React, like Remix does. SSR means that the JavaScript code is not (only) executed in a browser but also in non-browser environments like Node.js or others. There is no document in non-browser environments.
You can test this by adding a console.log(document); to any component, which won't work. We can use browser-only APIs by wrapping them in an useEffect as described by the docs.

export default function Index() {
    console.log(document); // won't work

  useEffect(() => {
    console.log(document); // works
  }, []);

  return <div>Hello</div>;
}

This doesn't help with your use case though because it's an external dependency.

Importing and re-exporting the component (export { default } from "react-json-view";) seems to cause problems on top of that, not sure why. Importing it directly at least leads to the error described above.

From my understanding, the component expects a JSON string for its src prop:

const json = { a: 1 };
// needs to be
const json = JSON.stringify({ a: 1 });

The solution would be to find another component or raise an issue in its repository, asking the maintainers to make it SSR-compatible and using this workaround in the meantime.

[sergiodxa]

If the component use browser only things re-exporting from a .client file plus ClientOnly should work.

The re-export should prevent the import server-side and the CientOnly should ensure it's never going to be rendered server-side (where it's going to be undefined)