Skip to main content

Featured post

How to Insert line break in Text component in React Native

Hi, I was developing an application in react native.I have to handle lots of text data in this small react native application.I have used  Text component in react native many times. While working on this application,i had a requirement to display some text content with line breaks.I will explain it clearly with an example.I want to display a text as shown below  Welcome Please subscribe my channel I wrote react native code as shown below <View> <Text> Welcome Please subscribe my channel </Text> <View> When i run these lines of code,It will display text as shown below Welcome Please subscribe my channel   - instead of displaying in two lines with line break,it displays in a single line.So i have to find a solution to insert line break in Text component in React Native.After lots of research,i found a clean solution as shown below <View> <Text> Welcome{"\n"} Please subscribe my channel </Text> <View> Here ...
Read more
Labels

`bigint` cannot be serialized as JSON. Please only return JSON serializable data types

Dear friends, In this article,i am discussing the below points 

  1. What is  `bigint` cannot be serialized as JSON. Please only return JSON serializable data types error           
  2. How to fix error  using superjson and babel-plugin-superjson-next


What is  `bigint` cannot be serialized as JSON. Please only return JSON serializable data types error  


When i was working in a next js project, i faced an error while dealing Bigint datatype.I tried a lots of methods.But i couldn't find a solution.I got the below error always 


error - Error: Error serializing `.users[0].deactivated` returned from `getServerSideProps` in "/users".

Reason: `bigint` cannot be serialized as JSON. Please only return JSON serializable data types.





How to fix error  using superjson and babel-plugin-superjson-next


Finally i decided to use superjson and babel-plugin-superjson-next to fix the error.By executing below command,i installed superjson and babel-plugin-superjson-next 


                  

npm i babel-plugin-superjson-next 

npm i superjson


then i created a  .babelrc  file as shown below 


{

    "presets": ["next/babel"],


    "plugins": ["superjson-next"]

}


By executing npm i babel-plugin-superjson-next and npm i superjson and creating .babelrc  file,i could fix `bigint` cannot be serialized as JSON. Please only return JSON serializable data types  error from my next js project 


Later i excuted 


npm run build

npm run dev


My next js project worked without any error related to JSON serializable data types


Labels: