Search code examples
reactjsproduction-environment

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

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:
enter image description here

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!

Solution

  • 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.