TypeError: Cannot read property 'map' of undefined

[wolfiton]

Bug report

Describe the bug

TypeError: Cannot read property 'map' of undefined, when following the Nextjs official tutorial

To Reproduce

Steps to reproduce the behavior, please provide code snippets or a repository:

Follow the NextJs tutorial using nextjs 9.3.6 and yarn
The tutorial can be found here

Expected behavior

To work and generate static content from markdown files to the blog in the nextjs tutorial

System information

Kubuntu 19.10(Ubuntu flavor) Linux
Browser Firefox, Chromium(Google Chrome for Linux- opensource)

Additional context

Created the whole project used to generate the error and posted it on Github, so you can reproduce it or reference it.

Project

[kartikpandey2]

there is typo in _app.js

you are passing ...pagePros instead of ...pageProps from _app.js .

[wolfiton]

Thanks @kartikpandey2 ,

One question, suggestion: Why doesn't NextJs show me exactly where the problem is? and instead, it offers me an error that is in another file?

[timneutkens]

In this case it broke because you destructured pagePros from the props object passed into the App component. This meant that the variable was defined but held undefined. The way that JSX spreading is compiled means this is the output: Babel repl

"use strict";

exports.__esModule = true;
exports.default = App;

function App({
  Component,
  pagePros
}) {
  return /*#__PURE__*/React.createElement(Component, pagePros);
}

React.createElement allows for the second argument to hold undefined, meaning React would not thrown an error.
Then when the pageProps are not passed it means your page does not get it's properties correctly and it will break in the way that you saw.

We don't control the props passing (React does) so we can't really warn here automatically if you destructure the wrong value. However if you were using TypeScript which does type checking on objects it would have shown you an error because of using a value that did not exist in the props. Here's the documentation for using TypeScript: https://nextjs.org/docs/basic-features/typescript

and the specific _app types: https://nextjs.org/docs/basic-features/typescript#custom-app

In that case (when using TypeScript) typescript will type-check AppProps and see that pagePros does not exist in AppProps so it will thrown an error.

I'll close this issue as it's not something we can detect as-is and the right way to go about it would be to adopt TypeScript in your app.

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.