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
