uiwjs / react-json-view

A React component for displaying and editing javascript arrays and JSON objects.
https://uiwjs.github.io/react-json-view/
MIT License
188 stars 11 forks source link

SSR support #16

Open mkdynamic opened 11 months ago

mkdynamic commented 11 months ago

When rendering the component server side with React 18 I get:

Error: Missing getServerSnapshot, which is required for server-rendered content. Will revert to client rendering.
jaywcjlove commented 11 months ago

@mkdynamic nextjs example: https://stackblitz.com/edit/stackblitz-starters-elrztl?file=app%2FJSON.tsx

'use client';
import JsonView from '@uiw/react-json-view';
import { nordTheme } from '@uiw/react-json-view/nord';

const avatar = 'https://i.imgur.com/MK3eW3As.jpg';
const longArray = new Array(1000).fill(1);
const example = {
  avatar,
  string: 'Lorem ipsum dolor sit amet',
  integer: 42,
  float: 114.514,
  bigint: BigInt(1000),
  longArray,
  string_number: '1234',
};

export default function JSONDemo() {
  return <JsonView value={example} style={nordTheme} />;
}