pre render Error: Minified React error #31; visit https://reactjs.org/docs/error-decoder.html?invariant=31&args[]=%5Bobject%20Promise%5D

Question

This is my page code todolist.js

    import Todo from "./todo";

const getTodos = async () => {
  let todos = await fetch("/api/todo/list");
  return todos.json();
};

export default async function TodoList() {
  const { todos } = await getTodos();

  return (
    <div>
      <ul style={{ listStyleType: "none", padding: 0 }}>
        {todos.map((t) => {
          return (
            <li key={t.id} style={{ padding: "5px 0" }}>
              
            </li>
          );
        })}
      </ul>
    </div>
  );
}

giving this error

> > my-next-app@0.1.0 build
> next build

info  - Linting and checking validity of types  
info  - Creating an optimized production build  
info  - Compiled successfully
info  - Collecting page data
[    ] info  - Generating static pages (0/7)
Error occurred prerendering page "/todolist". Read more: https://nextjs.org/docs/messages/prerender-error
Error: Minified React error #31; visit https://reactjs.org/docs/error-decoder.html?invariant=31&args[]=%5Bobject%20Promise%5D for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
    at Z (C:\Users\MazharKaunain\klll\my-next-app\node_modules\react-dom\cjs\react-dom-server.browser.production.min.js:76:490)    at Zc (C:\Users\MazharKaunain\klll\my-next-app\node_modules\react-dom\cjs\react-dom-server.browser.production.min.js:70:481)
    at Z (C:\Users\MazharKaunain\klll\my-next-app\node_modules\react-dom\cjs\react-dom-server.browser.production.min.js:76:89) 
    at Zc (C:\Users\MazharKaunain\klll\my-next-app\node_modules\react-dom\cjs\react-dom-server.browser.production.min.js:70:481)
    at Z (C:\Users\MazharKaunain\klll\my-next-app\node_modules\react-dom\cjs\react-dom-server.browser.production.min.js:76:89) 
    at Zc (C:\Users\MazharKaunain\klll\my-next-app\node_modules\react-dom\cjs\react-dom-server.browser.production.min.js:70:481)
    at Z (C:\Users\MazharKaunain\klll\my-next-app\node_modules\react-dom\cjs\react-dom-server.browser.production.min.js:76:89) 
    at $c (C:\Users\MazharKaunain\klll\my-next-app\node_modules\react-dom\cjs\react-dom-server.browser.production.min.js:78:98)    at bd (C:\Users\MazharKaunain\klll\my-next-app\node_modules\react-dom\cjs\react-dom-server.browser.production.min.js:77:404)
    at Z (C:\Users\MazharKaunain\klll\my-next-app\node_modules\react-dom\cjs\react-dom-server.browser.production.min.js:76:217)(node:10420) ExperimentalWarning: The Fetch API is an experimental feature. This feature could change at any time
(Use `node --trace-warnings ...` to show where the warning was created)
undefined
info  - Generating static pages (7/7)

> Build error occurred
Error: Export encountered errors on following paths:
        /todolist
    at C:\Users\MazharKaunain\klll\my-next-app\node_modules\next\dist\export\index.js:415:19
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async Span.traceAsyncFn (C:\Users\MazharKaunain\klll\my-next-app\node_modules\next\dist\trace\trace.js:79:20)
    at async C:\Users\MazharKaunain\klll\my-next-app\node_modules\next\dist\build\index.js:1400:21
    at async Span.traceAsyncFn (C:\Users\MazharKaunain\klll\my-next-app\node_modules\next\dist\trace\trace.js:79:20)
    at async C:\Users\MazharKaunain\klll\my-next-app\node_modules\next\dist\build\index.js:1259:17
    at async Span.traceAsyncFn (C:\Users\MazharKaunain\klll\my-next-app\node_modules\next\dist\trace\trace.js:79:20)
    at async Object.build [as default] (C:\Users\MazharKaunain\klll\my-next-app\node_modules\next\dist\build\index.js:66:29)   
PS C:\Users\MazharKaunain\klll\my-next-app>

can anyone point to the source of the problem. i am running the sample from here

Answer 1

Well it seems like you are calling todos.map even before todo has any data, let's fix it by doing a simple value check using

todos!==null && todos!==undefined && todos.length>0 &&

 import Todo from "./todo";

const getTodos = async () => {
  let todos = await fetch("/api/todo/list");
  return todos.json();
};

export default async function TodoList() {
  const { todos } = await getTodos();

  return (
    <div>
      <ul style={{ listStyleType: "none", padding: 0 }}>
        {todos!==null && todos!==undefined && todos.length>0 &&
         todos.map((t) => {
          return (
            <li key={t.id} style={{ padding: "5px 0" }}>
              
            </li>
          );
        })}
      </ul>
    </div>
  );
}

You can also use Ternary for showing different cases such as

{todos!==null && todos!==udefined &&
todos.length>0 ?
   // Render list with map

   :
   // Render list is empty
}