Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

571
Views
Why is the browser showing blank content, depsite the front-end and and back-end running without any errors?

I am having an issue with my MERN-Stack application rendering blank content in the browser despite the front-end and back-end running without any errors.

In the browser, two errors are coming up through inspect;

  1. Uncaught SyntaxError: Unexpected token '<' in main.b4d4fd26.js:1

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

What would be the solution to this?

Server:

const express = require("express");
const { ApolloServer } = require("apollo-server-express");
const path = require("path");
// require("dotenv").config();
require("dotenv").config({ path: path.resolve(__dirname, ".env") });

const { typeDefs, resolvers } = require("./schemas");
const { authMiddleware } = require("./utils/auth");
const db = require("./config/connection");

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

const server = new ApolloServer({
  typeDefs,
  resolvers,
  context: authMiddleware,
  // These two lines below enable the playground when deployed to heroku. You can remove them if you don't want this functionality
  introspection: true,
  playground: true,
});

server.applyMiddleware({ app });

app.use(express.urlencoded({ extended: false }));
app.use(express.json());

if (process.env.NODE_ENV === "production") {
  app.use(express.static(path.join(__dirname, "../client/build")));
}

app.get("*", (req, res) => {
  res.sendFile(path.join(__dirname, "../client/build/index.html"));
});

db.once("open", () => {
  app.listen(PORT, () => {
    console.log(`Server running on port http://localhost:${PORT}`);
    console.log(`Use GraphQL at http://localhost:${PORT}${server.graphqlPath}`);
  });
});

Manifest.json file:

{
  "short_name": "React App",
  "name": "Create React App Sample",
  "icons": [
    {
      "src": "favicon.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"
}
over 4 years ago · Santiago Trujillo
1 answers
Answer question

0

Found the issue...

So in order to run the application in the local machine, both the front-end and back-end need to be running. This could be done separately if the front-end and backend both have their own root directories. However, the right way to execute this is to run npm run develop in the terminal. This allows both of the application's servers to be fully functional.

Perks of being a rookie...

over 4 years ago · Santiago Trujillo Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!