.map is not a function when deploying on Heroku

user_11685363 0
Viewed 929

So my application works perfectly on my local, but when I deployed to Heroku the .map function that is generating my scores is not working, locally everything is working. I have a proxy in my package.json to resolve the CORs issue, I have also tried changing the endpoints to match my heroku url. The data coming from my GET request is an array so the .map is working.

I am pretty sure it is an endpoint issue but I am not sure how to find the error / resolve the error. Any help will be greatly appreciated!

This is the function used to get the scores

      getUserScores = () => {
        let id = this.state.currentUser._id

        axios.get(`/api/scores/` + id)
            .then(res => {

                this.setState({
                    ...this.state,
                    isLoaded: true,
                    scores: res.data
                }, () => console.log(this.state.scores))
                this.getHandicap();
            })
            .catch(err => console.log(`Something failed: ${err.message}`))
    }

This is the error I am getting in the console

error picture

Here is the deployed link on heroku: https://shielded-lowlands-75979.herokuapp.com/

require("dotenv").config();
const express = require('express');
const mongoose = require('mongoose');
const config = require('config');
const cors = require('cors')
const path = require('path');

// all routes
const scores = require('./routes/api/scores');
const user = require('./routes/api/users');
const auth = require('./routes/api/auth');

const app = express();
const PORT = process.env.PORT || 5000



//bodyparser
app.use(express.json());


//Serve static assets if in production
if (process.env.NODE_ENV === 'production') {
    //set static folder
    app.use(express.static('client/build'));

    app.get('*', (req, res) => {
        res.sendFile(path.resolve(__dirname, "client", "public", "index.html"))
    });
}


//mongodb connection
mongoose.connect(process.env.MONGODB_URI || config.get('mongoURI'),
    {
        useNewUrlParser: true,
        useUnifiedTopology: true
    })
    .then(() => console.log("MongoDB connected..."));

//cors setup
app.use(cors());


//use routes
app.use('/api/scores', scores)
app.use('/api/users', user)
app.use('/api/auth', auth)




app.listen(process.env.PORT || PORT, () => {
    console.log(`Server started on PORT ${PORT}`);
})
reactjs node.js endpoint heroku javascript
4 Answers

You've probably already figured this out, but for anyone who crosses this question I'll clarify what the other two meant.

if (process.env.NODE_ENV === "production") {

  app.use(express.static('client/build'))  // set static folder 
  
  app.get('*', (req, res)=> {     
    res.sendFile(path.resolve(__dirname, 'client', 'build',         
                  'index.html' )); 
  })
  app.get('*', (req, res)=> {     
    res.sendFile(path.resolve(__dirname, 'client', 'build',         
                  'index.html' )); 
  })
}

The above should be in your index/server.js filer in your backend/root folder toward the end above app.listen(process.env.PORT || 5000.... and below app.use("/api", routes) or similar code. Of course the paths in the static and get function should match your specific folder structure.

user_123333670

try putting //Serve static assets if in production section after //use routes

user_172430210

Try moving app.use(routes) above static assets in server.js. This worked for me.

user_132320120

Probably scores is not an array or it is just undefined for some reason

user_35732100
Related