Menu
I am facing the following error while building on AWS amplify:
Syntax error: Cannot read property 'map' of undefined (0:undefined)
Here is my code:
import React from 'react';
import ReactDOM from 'react-dom';
export default class BusinessHTTPService {
static getBusinessList = () => {
return axios.get(`${API_BASE}business-categories/?`).then(response => response.data);
};
}<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
203
The "cannot read property 'map' of undefined" error occurs when we call the map() method on an undefined value, most often when the map method is called before the data from an API request has arrived. To solve the error, initialize the value you're mapping over to an empty array.
The "Cannot read property 'props' of undefined" error occurs when a class method is called without having the correct context bound to the this keyword. To solve the error, define the class method as an arrow function or use the bind method in the classes' constructor method.
The "Uncaught TypeError: Cannot read properties of undefined (reading 'map')" error occurs in JavaScript, whenever you try to use the array map method on a variable that is undefined. This can usually happen in React, whenever you need to loop through an array of elements and display them.
This can usually happen in React, whenever you need to loop through an array of elements and display them. However, the array on which you are executing the map is undefined. This means that JavaScript sees the following code, and throws the above error:
As we know from the error message, it’s problematic to try to call map on undefined! This first quick fix might be enough for your use case: just default your stateful variable to an array while you’re waiting for your data to fetch.
The variable you are trying to map over is undefined. It will probably eventually be an array, but due to the asynchronous nature of React, you are experiencing at least one render when the variable is undefined. Let’s take this example code. In it, we fetch some data from an API and set state with that data.
I had the same issue with by build failing on AWS Amplify Console, but was fine locally.
How to reproduce locally
I was able to reproduce it locally by following these steps:
"npm start" would fail, and show the error "Line 0: Parsing error: Cannot read property 'map' of undefined".
How to solve
I was able to solve it eventually by following these steps:
I don't see the error anymore, and when I push to AWS Amplify Console, it builds without issues.
198
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
