Estoy creando una cartera con un formulario de contacto en React (create-react-app). Necesito un poco de backend para que el usuario pueda enviar un mensaje a mi dirección de correo electrónico. Todo funciona bien. Pero ahora quiero implementar la aplicación en la web con heroku. Sin embargo, cuando ejecuto una prueba al intentar ejecutar la aplicación en el puerto del servidor localhost: 5000, aparecen estos dos errores en el título y un documento en blanco.
Error de sintaxis no detectado: token inesperado '<'
Manifiesto: Línea: 1, columna: 1, Error de sintaxis.
Mi archivo manifest.json se ve bien. ¿Será que los archivos css no se encuentran en la carpeta estática?

Estructura de la carpeta del proyecto

El servidor

 const express = require('express') const router = express.Router() const cors = require('cors') const nodemailer = require('nodemailer') const hbs = require('nodemailer-express-handlebars') const path = require('path') const colors = require('colors') const bcrypt = require('bcrypt'); const dotenv = require('dotenv') const PORT = process.env.REACT_APP_PORT || 5000 const app = express() app.use(cors()) dotenv.config() app.use(express.json()) app.use(express.static(path.join(__dirname, '../myportfolio/build'))) app.get('*', (req, res) => { res.sendFile(path.resolve(__dirname, '../myportfolio', 'build', 'index.html')) }) //removed nodemailer code app.listen(PORT, () => console.log(`Server up and running in ${process.env.REACT_APP_NODE_ENV} on port ${PORT} !`.yellow))

Mi manifiesto.json

 { "short_name": "Portfolio", "name": "my name, Portfolio", "icons": [ { "src": "discoballicon.ico", "sizes": "64x64 32x32 24x24 16x16", "type": "image/x-icon" }, { "src": "logo192.png", "type": "image/png", "sizes": "192x192" }, { "src": "logo512.png", "type": "image/png", "sizes": "512x512" } ], "start_url": ".", "display": "standalone", "theme_color": "#000000", "background_color": "#ffffff" }