React app works fine when running with react-scripts start but gets a "Unexpected SyntaxError: Unexpected Token: <" when built

Question

I'm trying to serve up my built portfolio site using an express server and react-scripts build. When I run react-scripts start the app works perfectly fine. However, when I serve up the build index.js the app runs into these errors:

2.8b4a0c83.chunk.js:1 Uncaught SyntaxError: Unexpected token '<'

main.4e27e21d.chunk.js:1 Uncaught SyntaxError: Unexpected token '<'

manifest.json:1 Manifest: Line: 1, column: 1, Syntax error.

I'm pretty sure its not the server file since it is serving up the right file but I don't know where else to debug. I can post whatever code you ask for if you have an idea of what is going on.

Code

Server.js

require("dotenv").config();
var express = require("express");
var router = express.Router();
var nodemailer = require("nodemailer");
var cors = require("cors");
const PORT = process.env.PORT || 8080;
const bodyParser = require("body-parser");
const path = require("path");
const app = express();
const root = path.join(__dirname, "/build");

app.use(cors());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());
app.use(express.static(root));

app.get("*", function (req, res) {
  res.sendFile("/index.html", { root });
});

var transport = {
  service: "gmail",
  auth: {
    user: process.env.USER,
    pass: process.env.PASS,
  },
};

var transporter = nodemailer.createTransport(transport);

transporter.verify((error, success) => {
  if (error) {
    console.log(error);
  } else {
    console.log("Transporter is ready");
  }
});

router.post("/send", (req, res, next) => {
  var name = req.body.name;
  var author = req.body.author;
  var email = req.body.email;
  var content = `name: ${name} \n email: ${author} \n message: ${email}`;

  var mail = {
    from: name,
    to: "emailHere",
    subject: "New Message From Portfolio Site",
    text: content,
  };

  transporter.sendMail(mail, (err, data) => {
    if (err) {
      console.log(err);
      res.json({
        status: "failed",
      });
    } else {
      console.log("yeees");
      res.json({
        status: "success",
      });
    }
  });
});

app.use(express.json());
app.use("/", router);
app.listen(PORT, () => {
  console.log("Server is running on " + PORT);
});

Package.json

{
  "name": "react-portfolio",
  "proxy": "http://localhost:8080",
  "homepage": "https://SquidDOTjpeg.github.io/react-portfolio/",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.5.0",
    "@testing-library/user-event": "^7.2.1",
    "axios": "^0.19.2",
    "cors": "^2.8.5",
    "dotenv": "^8.2.0",
    "express": "^4.17.1",
    "nodemailer": "^6.4.10",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-router-dom": "^5.2.0",
    "react-scripts": "3.4.1"
  },
  "scripts": {
    "both": "run-p dev start",
    "dev": "react-scripts start",
    "start": "node server.js",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build",
    "heroku-postbuild": "npm i && npm run build"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "express-pino-logger": "^5.0.0",
    "gh-pages": "^3.0.0",
    "node-env-run": "^3.0.2",
    "nodemon": "^2.0.4",
    "npm-run-all": "^4.1.5",
    "pino-colada": "^2.0.1"
  },
  "description": "This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).",
  "main": "index.js",
  "repository": {
    "type": "git",
    "url": "git+https://github.com/SquidDOTjpeg/react-portfolio.git"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/SquidDOTjpeg/react-portfolio/issues"
  }
}

Possibly a dup of https://stackoverflow.com/questions/18561556/syntax-error-unexpected-token ? — user3486184, Jul 31 '20 at 20:33

score 2 · Answer 1 · answered Jul 31 '20 at 20:22

2

Just remove

"homepage": "https://SquidDOTjpeg.github.io/react-portfolio/"

from your package.json

answered Jul 31 '20 at 20:22

Vijay Gaikwad

457
1
4
16

You were right too but I can't choose two answers but, thank you. – SquidDOTjpeg Aug 03 '20 at 18:54

score 0 · Accepted Answer · answered Jul 31 '20 at 20:27

0

The problem is you have been trying to deploy the website on Github pages and heroku and thus you have your package.json file configured for both of them. All you need to do is remove the

"homepage": "https://SquidDOTjpeg.github.io/react-portfolio/"

from your package.json file. If you want to deploy the app you need to keep it there, else the app won't work on gh-page.

answered Jul 31 '20 at 20:27

KDSG

145
1
6

You were right. I think I tried this before but I didn't ever make a new build after deleting the homepage line in the package.json. – SquidDOTjpeg Aug 03 '20 at 18:45

React app works fine when running with react-scripts start but gets a "Unexpected SyntaxError: Unexpected Token: <" when built

2 Answers2