NextJS: Error serializing `.data.data` returned from `getServerSideProps`

See also questions close to this topic

• how to change prettier format for react native

  my code formatting prettier didn't works well for react native, i don't understand where to config it but it works well with flutter

  from this code

        import { View, Text } from 'react-native'
      
      import React from 'react'
      
      export default function App() {
        return (
          <View>
      
      <Text>Apps</Text>   
  </View>
        )
      }
  

  it's formatted to this

  import {
    View,
    Text
  } from 'react-native'
  
  import React from 'react'
  
  export default function App() {
    return ( <
      View >
  
      <
      Text > Apps < /Text>
  
  
      <
      /View>
    )
  }
  
• MarkLogic server-side JavaScript and XQuery

  I am just starting using NoSQL MarkLogic DB and trying to choose for me the best query language to learn and use in future. On server side MarkLogic provides the possibility to use JavaScript API or XQuery API.

  I want to receive an advice. Which language is better to concentrate on and learn? JavaScript or XQuery?
• Popover in chrome extension using js

  My goal is I want to create a chrome extension like Toucan Extension. I want to highlight some paragraphs in random site then translate it to specific language. The problem is I do not have an idea on how to implement a popover in chrome extension like in the picture below.

  
• react-router-dom v6 params only numbers

  I want add number regex in may param in react-router-dom v6. it work fin in v5 like it:

   <Route path="list/:id(\d+)" element={<MyComponent/>} /> 
  

  but it not work in v6.
• How can I fixed my problem"FirebaseError: Firebase: Error (auth/invalid-api-key)."

  My environment variable is ok. No comas and name mistakes but they given me error like "FirebaseError: Firebase: Error (auth/invalid-api-key)". How can I fixed it. Please Help me...

  This my .env file

  REACT_APP_apiKey=AIzaSyBWobnhbdeMdNpXXXXXXXXXXXXXXXXXXXX
  REACT_APP_authDomain=XXXXX.firebaseapp.com
  REACT_APP_projectId=XXXX
  REACT_APP_storageBucket=XXXXX.appspot.com
  REACT_APP_messagingSenderId=4997390XXXXX
  REACT_APP_appId=1:4997390XXXXX:web:cc7bc80aa1bdb78fXXXXXX
  REACT_APP_measurementId=G-M1XDXXXXXX
  

  This my firebase config file

  const firebaseConfig = {
    apiKey: process.env.REACT_APP_apiKey,
    authDomain: process.env.REACT_APP_authDomain,
    projectId: process.env.REACT_APP_projectId,
    storageBucket: process.env.REACT_APP_storageBucket,
    messagingSenderId: process.env.REACT_APP_messagingSenderId,
    appId: process.env.REACT_APP_appId,
    measurementId: process.env.REACT_APP_measurementId,
  };
  
  when I debugging firebaseConfig object
  
  console.log(firebaseConfig.apiKey);  ==========> undefined 
  console.log(firebaseConfig.authDomain);  ==========> undefined 
  console.log(firebaseConfig.projectId);  ==========> undefined 
  console.log(firebaseConfig.storageBucket); ==========> undefined 
  console.log(firebaseConfig.measurementId); ==========> undefined 
  console.log(firebaseConfig.appId); ==========> undefined 
  console.log(firebaseConfig.measurementId); ==========> undefined 
  
  

  client side given error this "FirebaseError: Firebase: Error (auth/invalid-api-key)"
• How to convert String having key=value pairs to Json

  myString = {AcquirerName=abc, AcquiringBankCode=0.2, ApprovalCode=00};

  I want to convert it to the following string.

  {"AcquirerName": "abc", "AcquiringBankCode": 0.2, "ApprovalCode": 0};
  

  How can I do it in java?
• Fetch doesn't retrive data

  I am currently building a login form which will be using a restAPI for the registration/Auth but I'm receiving a 401 error when using fetch to test the retrieved data.

  console.log(fetch('http://localhost:5000/users/'), { method: 'get', headers: { 'Content-Type': 'application/json' }, })

  .then(res => res.json())
  .then(json => console.log(json))</code>
  
• Async function passed as prop into React component causing @typescript-eslint/no-misused-promises error

  I have the following asynchronous submitNewPatient function which is throwing @typescript-eslint/no-misused-promises error message from elint. Is it possible to adjust the function such that it removes this error?

  const submitNewPatient = async (values: PatientFormValues) => {
      try {
        const { data: newPatient } = await axios.post<Patient>(
          `${apiBaseUrl}/patients`,
          values
        );
        dispatch({ type: "ADD_PATIENT", payload: newPatient });
        closeModal();
      } catch (e: unknown) {
        if (axios.isAxiosError(e)) {
          console.error(e?.response?.data || "Unrecognized axios error");
          setError(
            String(e?.response?.data?.error) || "Unrecognized axios error"
          );
        } else {
          console.error("Unknown error", e);
          setError("Unknown error");
        }
      }
    };
  

  Component used to pass function as a prop:

  <AddPatientModal
          modalOpen={modalOpen}
          onSubmit={submitNewPatient}
          error={error}
          onClose={closeModal}
        />
  

  I have also tried the following which removes the eslint error message based. However, seems like I am not entering the async code block (perhaps not triggering the async() function):

    const submitNewPatient = (values: PatientFormValues) => {
      async () => {
        try {
          const { data: newPatient } = await axios.post<Patient>(
            `${apiBaseUrl}/patients`,
            values
          );
          dispatch({ type: "ADD_PATIENT", payload: newPatient });
          closeModal();
        } catch (e: unknown) {
          if (axios.isAxiosError(e)) {
            console.error(e?.response?.data || "Unrecognized axios error");
            setError(
              String(e?.response?.data?.error) || "Unrecognized axios error"
            );
          } else {
            console.error("Unknown error", e);
            setError("Unknown error");
          }
        }
      };
    };
  
• Is there any way to avoid preflight OPTION request?

  I'm creating a react app using the Laravel API and sending requests through Axios but a preflight OPTION request is sent with every GET or POST request
  although these preflight requests are not causing me any trouble, I just want to get them out of the way.
  I've done enough reading on CORS to know that only simple requests don't need preflight requests, and since my requests contain authorization headers, they are not considered simple.
  I've tried:
  

  1. adding a proxy field to my package.json
     
  2. creating a middleware for preflight requests
     There was no success with any of the above.
     As far as I can tell, this is the only answer that will work, Why is an OPTIONS request sent and can I disable it?, But I have no idea where to add this header: Access-Control-Allow-Origin: *
     Or I can add this: Access-Control-Max-Age: 600 , Yet again, I'm not sure where it belongs. I mean, I am not sending the option request, so how am I supposed to set headers for something I am not even sending?
     Okay, enough with the explaining, here is my post request:
     

  axios.post(`/ticket/create`, formData).then(res => {
              if (res.status === 201) {
                  alert('success')
              } else {
                  alert('request failed')
              }
          })
  

  Here are my axios configs:

  axios.defaults.baseURL = 'http://127.0.0.1:8000/api';
  axios.interceptors.request.use(function (config) {
      const token = localStorage.getItem('auth_token');
      config.headers.Authorization = token ? `Bearer ${token}` : '';
      return config;
  })
  
• Apollo `useMutation()` stuck loading inside Next.js component

  The following form component in Next.js submits without errors but never completes the mutation. Instead it get's stuck in the loading state.

  import React, { useState } from "react";
  import { gql, useMutation } from "@apollo/client";
  import { ApolloClient, InMemoryCache } from "@apollo/client";
  
  const client = new ApolloClient({
    ssrMode: true,
    uri: process.env.API_URL,
    cache: new InMemoryCache(),
  });
  
  const CREATE_COMMENT = gql`
    mutation CreateComment(
      $username: String!
      $comment: String!
    ) {
      createComment(
        data: { username: $username, comment: $comment }
      ) {
        id
        username
        comment
      }
    }
  `;
  
  export default function SocialForm() {
    const [commentName, updateCommentName] = useState("");
    const [commentDescription, updateCommentDescription] = useState("");
    const [createComment, { data, error, loading }] = useMutation(
      CREATE_COMMENT,
      { client }
    );
  
    const handleFormSubmit = async () => {
      await createComment({
        variables: {
          name: commentName,
          comment: commentDescription
        },
      });
    };
  
    if (loading) return "loading...";
    if (error) return <p>error text :(</p>;
    return (
      <>
        <form
          onSubmit={async (e) => {
            e.preventDefault();
            await handleFormSubmit();
          }}
          className="social-form"
        >
          <input
            required
            onChange={(e) => updateCommentName(e.target.value)}
            type="text"
            placeholder="Full Name"
            className=""
          />
          <textarea
            required
            maxLength="280"
            onChange={(e) => updateCommentDescription(e.target.value)}
            className="w-full"
            name="comment"
            rows="5"
            placeholder="Leave your thoughts and images at the moment"
          />
        </form>
      </>
    );
  }
  
  
  

  Also the server side mutation with this exact same schema runs correctly inside Apollo playground and I'm using Keystone.js to auto generate the schema.
• I am having problem in development mode with NextJS but it works perfect on production. Warning: Prop `className` did not match. Server

  enter image description here

  This is the problem I am using A React framework & component library for building web user interfaces at Volvo Cars and the engine for this css-in-js. Please check the photo. Thank you!