React Uncaught SyntaxError: Unexpected token '<' and Manifest: Line: 1, column: 1, Syntax error

Question

I am creating React web app from two folders and the dynamic routes within the app return these errors. Static routes work just fine. I get the errors: Uncaught SyntaxError: Unexpected token '<' manifest.json:1 Manifest: Line: 1, column: 1, Syntax error.

import React, { Component } from 'react';
import './NavBar.css';
import Axios from 'axios';
import { observer } from 'mobx-react';
import UserStore from '../../src/Stores/UserStore';

class NavBar extends Component {
    constructor(props) {
        super(props);
        this.state = {
            results: {},
            apiLoading: false,
            message: ''
        };
    }

    async componentDidMount() {
        try{ //check if the user is logged in
            let res = await fetch('/isLoggedIn', { 
                method: 'post',
                headers: {
                    'Accept': 'application/json',
                    'Content-Type': 'application/json'
                }
            });

            let result = await res.json();

            if (result && result.success) {
                UserStore.loading = false;
                UserStore.isLoggedIn = true;
                UserStore.username = result.username;                
            }else{
                UserStore.loading = false;
                UserStore.isLoggedIn = false; 
            }
        }
        catch(error){
            UserStore.loading = false;
            UserStore.isLoggedIn = false;
        }  
    }

render () {

        if(UserStore.loading) {
            return(

              <div>
                <p>Loading, please wait...</p>
              </div>

            );
        }else{            
            if(UserStore.isLoggedIn){

                let hrefString = '/account/' + UserStore.username;
                return(
                    <div className="navigation">

                        <div className="HomeButton">
                            <a href="/"><h3>Stock Track</h3></a>
                            <i id="#icon" className="fas fa-globe"></i>
                        </div>

                        <div className="NavButtons">
                            <a href={hrefString}>My Account</a>
                            <a href="/lessons">Lessons</a> 
                        </div>

                    </div>
                );

            }else{
                return(
                    <div className="navigation">

                        <div className="HomeButton">
                            <a href="/"><h3>Stock Track</h3></a>
                            <i id="#icon" className="fas fa-globe"></i>
                        </div>

                        <div className="NavButtons">
                            <a href="/register">Register</a>
                            <a href="/login">Login</a>
                            <a href="/lessons">Lessons</a>
                        </div>

                    </div>
                );
            }
        }
}

In the other folder (folder 2) I have this code that effectively joins both folders:

app.get('/*', function(req, res) {
    res.sendFile(path.join(__dirname, 'build', 'index.html'));
});

And this folder contains a router contains:

isLoggedIn(app, db) {

        app.post('/isLoggedIn', (req,res) => {

            if(req.session.userID) {
                let cols = [req.session.userID];

                db.query('SELECT * FROM users WHERE id = ? LIMIT 1', cols, (err, 
                         data, fields) => { //add cols 
                    if(data && data.length ===1){
                        res.json({
                            success: true,
                            username: data[0].username
                        });
                        return true;
                    }else{
                        res.json({
                            success: false
                        })
                    }
                })
            }else{
                res.json({
                    success: false
                });
            } 
        });

    }

In my App.js (folder 1) I have a router that includes:

<Router> 
        <Switch>

          {/* This route doesn't return the error */}

          <Route exact path="/marketoverview" component={marketOverview} /> 

          {/* But this route returns the error */}

          <Route path='/account/:username' component={MyAccount}/>

        </Switch>
</Router>

Thank you for your suggestions

Answer 1

Go to package.json file. Look for the line home':'https://github.com/yourname/yourrepo and replace it with your domain like this "homepage": "https://your-domain.com/"

run npm run build then deploy and if you are using github pages, commit and push your changes then run npm run deploy, and you are good to go

Answer 2

Commenting as I have had the same issue. The HTML file was being served because the order of the code was incorrect, as referenced in the create-react-app deploy doc Below is the correct order: Note: nothing else needed to be changed, just the server.js code

// Have Node serve the files for our built React app
app.use(express.static(path.join(__dirname, '../client/build')));

/// All other GET requests not handled before will return our React app
app.get('/*', function (req, res) {
  res.sendFile(path.join(__dirname, '../client/build', 'index.html'));
});

Answer 3

Check the order you are setting the public/static path and using routes in your server

I had the exact same problem except it happened when navigating to urls by typing them in the browser instead of using links. I setup a catch all route like so:

routes.js

router.get('/*', (req, res) => {
    res.sendFile(path.resolve(__dirname, '../../client/build', 'index.html'));
});

This returned the same errors:

chrome console

Uncaught SyntaxError: Unexpected token '<'
main.7c34eb0e.chunk.js:1 Uncaught SyntaxError: Unexpected token '<'
manifest.json:1 Manifest: Line: 1, column: 1, Syntax error.

Changing the order of the routes and public folder middleware fixed it. I went from:

server.js

app.use('/', routes);
app.use(express.static(path.join(__dirname, '../client/build')));

to:

app.use(express.static(path.join(__dirname, '../client/build')));
app.use('/', routes);

Answer 4

If you are stilling facing this issue and you are using express then try this

In your folder2 you had written

app.get('/*', function(req, res) {
    res.sendFile(path.join(__dirname, 'build', 'index.html'));
});

But are if you are not using this then it is going to show the error which you are getting

app.use(express.static(path.join(__dirname, "build")));

Just use the above and you are good to go.

But in my case when i use the above then the page is loaded but get request to / is not loaded from app.get('/') instead that page is loaded through the line which we just added above, and here I want that page loaded from app.get('/') as i was sending some cookies, so for that I replace above line with following:

app.use('/static', express.static(path.join(__dirname, "build/static")));
app.use('/manifest.json', express.static(path.join(__dirname, "build", "manifest.json")));

you can also include favicon.ico

Answer 5

I have faced the same problem after copying repo info from my backend package.json to frontend. It seems to be an error for CRA development server when adding "homepage" line in package.json. I received a lot of errors in console, this one and some including %PUBLIC_URL% fails from index.html. So, I fixed this by removing

homepage": "https://github.com/yourname/yourrepo",

line. All works fine now. Maybe it will be useful for someone

Answer 6

Check your manifest.json file in your public/ folder. If you don't have one, then create one and add this default content.

{
  "short_name": "React App",
  "name": "Create React App Sample",
  "icons": [],
  "start_url": ".",
  "display": "standalone",
  "theme_color": "#000000",
  "background_color": "#ffffff"
}

Stop your server in the terminal and run npm start again.