fix: disable ssr in function inspect

Author: himself65

src/components/DataTypes/Function.tsx

@@ -1,4 +1,8 @@
-import { Box } from '@mui/material'
+/**
+ * Use NoSsr on function value.
+ *  Because in Next.js SSR, the function will be translated to other type
+ */
+import { Box, NoSsr } from '@mui/material'
 import type React from 'react'
 
 import { useJsonViewerStore } from '../../stores/JsonViewerStore'
@@ -39,7 +43,7 @@ const rb = '}'
 
 export const PreFunctionType: React.FC<DataItemProps<Function>> = (props) => {
   return (
-    <>
+    <NoSsr>
       <DataTypeLabel dataType='function'/>
       <Box
         component='span' className='data-function-start'
@@ -50,42 +54,46 @@ export const PreFunctionType: React.FC<DataItemProps<Function>> = (props) => {
         {functionName(props.value)}
         {' '}{lb}
       </Box>
-    </>
+    </NoSsr>
   )
 }
 
 export const PostFunctionType: React.FC<DataItemProps<Function>> = () => {
   return (
-    <Box component='span' className='data-function-end'>
-      {rb}
-    </Box>
+    <NoSsr>
+      <Box component='span' className='data-function-end'>
+        {rb}
+      </Box>
+    </NoSsr>
   )
 }
 
 export const FunctionType: React.FC<DataItemProps<Function>> = (props) => {
   const functionColor = useJsonViewerStore(store => store.colorspace.base05)
   return (
-    <Box
-      className='data-function'
-      sx={{
-        display: props.inspect ? 'block' : 'inline-block',
-        pl: props.inspect ? 2 : 0,
-        color: functionColor
-      }}
-    >
-      {props.inspect
-        ? functionBody(props.value)
-        : (
-          <Box component='span' className='data-function-body'
-               onClick={() => props.setInspect(true)}
-               sx={{
-                 '&:hover': { cursor: 'pointer' }
-               }}
-          >
-            ...
-          </Box>
-          )
-      }
-    </Box>
+    <NoSsr>
+      <Box
+        className='data-function'
+        sx={{
+          display: props.inspect ? 'block' : 'inline-block',
+          pl: props.inspect ? 2 : 0,
+          color: functionColor
+        }}
+      >
+        {props.inspect
+          ? functionBody(props.value)
+          : (
+            <Box component='span' className='data-function-body'
+                 onClick={() => props.setInspect(true)}
+                 sx={{
+                   '&:hover': { cursor: 'pointer' }
+                 }}
+            >
+              ...
+            </Box>
+            )
+        }
+      </Box>
+    </NoSsr>
   )
 }