React -- getting ".map is not a function" on PRODUCTION build, but not on regular dev build? - reactjs

Question

I can't seem to debug this... not sure what's wrong.
This is a React front-end communicating using AXIOS to a Java/MySQL backend. Axios is making CRUD requests over localhost to fetch/update data.
When I run NPM START (development - port 3000) for my React application, it runs fine. However, when I run NPM RUN BUILD and then serve the production build (port 5000), I am getting the following error messages in the console:
Uncaught (in promise) TypeError: this.state.reportData.map is not a function
at t.value (TotalsPerCustomer.js:378)
at Oi (react-dom.production.min.js:3785)
at Ni (react-dom.production.min.js:3776)
at Ri (react-dom.production.min.js:3960)
at Va (react-dom.production.min.js:5514)
at Qa (react-dom.production.min.js:5536)
at Ou (react-dom.production.min.js:5958)
at Pu (react-dom.production.min.js:5925)
at ku (react-dom.production.min.js:5860)
at Ja (react-dom.production.min.js:5787)
I faced this ".map is not a function" previously when I wasn't properly using an ARRAY - but I know this isn't causing the issue now since it works fine on development (Port 3000).
I've tried to do some research on why this is occurring but haven't found any clear answers.
I have added "localhost:5000" to the allowed Origins for CORS in Java back end:
package com.example.groupproject;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.context.annotation.Bean;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
#SpringBootApplication
public class GroupProjectApplication {
public static void main(String[] args) {
SpringApplication.run(GroupProjectApplication.class, args);
}
#Bean
public WebMvcConfigurer corsConfigurer() {
return new WebMvcConfigurer() {
#Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**").allowedOrigins("http://localhost:3000","http://localhost:3001","http://localhost:5000");
}
};
}
}
I think I need to understand better what is occurring when a production build is created - I know it creates an minified version of the code -- does this mean that if I have functions named the same thing in different React components then it will create an issue?
Do I need to add the axios dependency somewhere in my WebPack folder? Or is there a different dependency or something missing in my WebPack?
See below screenshot of the console:
I don't really know how to begin debugging using these console errors - can someone shed some light on this?
My apologies for being a little clueless on this production build - any help is much appreciated.
Thanks!

Answer 1

This happen to me as well. First I tried to resolve as it is problem with Array and then finally realized that in reality it is not - because front end (port 5000, production build) lost connection with back end (port 8080) when building for production, hence array was empty.
So this is how I resolved it:
created .env file in root of my React project:
REACT_APP_API_URL_PROD=http://xxx.xxx.xxx.xxx:8080
REACT_APP_API_URL_TEST=http://xxx.xxx.xxx.xxx:8080
REACT_APP_API_URL_DEV=http://localhost:8080
and then in requests.js file (code snippet)
import axios from 'axios';
import endpoints from './endpoints';
if (process.env.NODE_ENV === 'production') {
axios.defaults.baseURL = process.env.REACT_APP_API_URL_PROD;
} else if (process.env.NODE_ENV === 'test') {
axios.defaults.baseURL = process.env.REACT_APP_API_URL_TEST;
} else {
axios.defaults.baseURL = process.env.REACT_APP_API_URL_DEV;
}
export const getRequest = async url => axios.get(url);
export const get = (type, params, options = null) => dispatch => {
const fn = endpoints[type];
axios.defaults.headers.common = {'Authorization': `Bearer ${localStorage.getItem('token')}`};
axios.get(fn(params), options)
.then(response => {
dispatch({
type: type,
payload: response.data
});
});
};
Now, why this is late answer for you, might happen to someone in the future to lose few hours trying to resolve this.
After this, static pages were properly served with 'serve -s build' as well as with Apache HTTP server, and I guess it could be served with any other server.
Please read this for further info.

Answer 2

marked as duplicate of this question:
data.map is not a function
In general, when getting ".map is not a function", this means that you aren't giving an array to map. Only array types can be mapped. So if needed, set the initial state as an empty array (then fetch data, set state, etc.). Bear in mind that if you are mapping certain keys into your page, you may need to set the initial empty array with a 'blank' object, with empty or null values for those keys.
Thanks to those who helped answer this question initially.