title: SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data on React app
body: <p>I have a React app that uses express in the backend. I try to get from my db a list of messages through a fetch API call.</p>
  
  <p>The code in the Frontend:</p>
  
  <p><strong>App.js</strong></p>
  
  <pre><code>getMessages = () =&gt; {
  fetch('/api/mess')
  .then(res =&gt; res.json())
  .then(res =&gt; {
    var Messages = res.map(r =&gt; r.messages);
    this.setState({ Messages });
  });
  </code></pre>
  
  <p>};</p>
  
  <p>The code in the backend:</p>
  
  <p><strong>api/mess.js</strong></p>
  
  <pre><code>var express = require('express');
  var Mess = require('../queries/mess');
  
  var router = express.Router();
  
  router.get('/', (req, res) =&gt; {
          Mess.retrieveAll((err, messages) =&gt; {
          if (err)
              return res.json(err);
          return res.json(messages);
      })
  });
  
  router.post('/', (req, res) =&gt; {
      var message = req.body.message;
      Mess.insert(message, (err, result) =&gt; {
          if (err)
              return res.json(err);
          return res.json(result);
      });
  });
  
  module.exports = router;
  </code></pre>
  
  <p><strong>queries/mess.js</strong></p>
  
  <pre><code>const db = require('../database');
  
  class Mess {
      static retrieveAll(callback) {
          db.query('SELECT * FROM mess;', (err, res) =&gt; {
              if (err.error) 
                  return callback(err);
              callback(res); 
          });
      }
  
      static insert(mess, callback) {
          db.query('INSERT INTO mess (messages) VALUES ($1)', [mess], (err, res) =&gt; {
              if (err.error)
                  return callback(err);
              callback(res);
          });
      }
  }
  
  module.exports = Mess;
  </code></pre>
  
  <p><strong>index.js</strong></p>
  
  <pre><code>const path = require('path');
  const express = require('express');
  const bodyParser = require('body-parser');
  
  var db = require('./database');
  
  const ENV = process.env.NODE_ENV;
  const PORT = process.env.PORT || 3011;
  
  const app = express();
  app.use(express.json());
  app.use(express.urlencoded({ extended: false }));
  app.use(bodyParser.json());
  
  app.use('/api/mess', require('./api/mess'));
  app.use('/api/roles', require('./api/roles'));
  
  app.listen(PORT, () =&gt; {
    console.log(`Server listening on port ${PORT}...`);
  });
  
  module.exports = app;
  </code></pre>
  
  <p>I get this error on my Frontend:</p>
  
  <blockquote>
    <p>SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data</p>
  </blockquote>
  
  <p>I have tried and changed every response and request to use either JSON.parse or .json and I get the same message no matter what.</p>
  
  <p>When I use my browser and go to the api channel I get a correctly formatted JSON with the contents of the db.</p>
  
  <p><a href="https://i.stack.imgur.com/w85tp.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/w85tp.png" alt="api"></a></p>
  
  <p>Did I miss something?</p>
  
  <p><em>EDIT:</em></p>
  
  <p>The stack trace is super minimal: 
  <a href="https://i.stack.imgur.com/RKt6p.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/RKt6p.png" alt="enter image description here"></a></p>
  
  <p>When I try:</p>
  
  <p><code>getMessages = () =&gt; {
      fetch('/api/mess')
      .then(res =&gt; console.log(res));
    };</code></p>
  
  <p>I get this object:</p>
  
  <p><a href="https://i.stack.imgur.com/tYBbt.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/tYBbt.png" alt="enter image description here"></a></p>