Unexpected token < error in react router component
JavascriptReactjsHtml5 HistoryJavascript Problem Overview
I'm trying to write router component for my react app. I'm create new react class and define some routes in componentDidMount method. This is full method
componentDidMount: function () {
var me = this;
router.get('/', function(req){
me.setState({
component: <MainPage />
});
});
router.get('/realty', function(req){
me.setState({
component: <RealtyPage />
});
});
router.get('/realty/:id', function(req){
me.setState({
component: <RealtyPage id={req.params.id} />
});
});
},
When I'm go to '/' or '/realty' all works. But, when I'm go to the 'realty/new' I've got error Uncaught SyntaxError: Unexpected token < in app.js:1. But Chrome debugger display that error in my index.html and I even can't debug this in browser. This error happens every time, when I go to the route with '/'. I.m trying to use other client-side routers, like page.js, rlite, grapnel, but all still the same. Maybe someone have any idea about this error?
UPD: This is fuul code of router component. Now it use page.js fo routing and I see the same error
var React = require('react');
var page = require('page');
var MainPage = require('../components/MainPage');
var RealtyPage = require('../components/RealtyPage');
var Router = React.createClass({
getInitialState: function(){
return {
component: <RealtyPage />
}
},
componentDidMount: function () {
var me = this;
page('/', function (ctx) {
me.setState({
component: <MainPage />
});
});
page('/realty', function (ctx) {
me.setState({
component: <RealtyPage />
});
});
page.start();
},
render: function(){
return this.state.component
}
});
module.exports = Router;
Javascript Solutions
Solution 1 - Javascript
The "unexpected token" error can show up for a number of different reasons. I ran into a similar problem, and in my case the problem was that the script tag to load the generated bundle in the html was like so:
<script src="scripts/app.js"></script>
When navigating to a route with a parameter (same thing will happen to a nested route or a route with more than one segment), browser would try to load the script using the wrong url. In my case the route path was 'user/:id', and the browser made a request to 'http://127.0.0.1:3000/**user**/scripts/app.js'; instead of 'http://127.0.0.1:3000/scripts/app.js';. The solution was easy, change the script tag to this:
<script src="/scripts/app.js"></script>
Solution 2 - Javascript
If anyone else is having this problem, please check your devtools network tab for server responses. The reason behind the error message is that you are trying to load a javascript/json file and an html file was returned (possibly an error message).
HTML files start like this normally:
<!doctype html>
<html>
...
The browser sees the first < and gets confused because this is not valid JavaScript so prints out the error message:
SyntaxError: Unexpected token <
So in the above case, when the OP requested a wrong filename, he got an error page back (in HTML) which lead to that error.
Hope that helps someone else :)
Solution 3 - Javascript
Had the same error as well when using React-Router properties after adding the "/:uid" to edit relative path in my code:
<Route path="/edit/:uid" component={EditPage}/>
The problem was caused in my index.html where I load my main reference to my compiled javascript file bundle.js.
I switched:
<script src="./bundle.js"></script>
to
<script src="/bundle.js"></script>
And it immediately solved the problem.
Solution 4 - Javascript
do you have this into your package.json ?
"devDependencies": {
"@babel/plugin-proposal-class-properties": "^7.7.4",
"@babel/preset-react": "^7.0.0",
...
}
if yes -> do you have a .babelrc file ?
if not :
add .babelrc file to your root application. and paste it into :
{
"presets": ["@babel/preset-env", "@babel/preset-react"]
}
To finish installation : npm install and npm run dev
source : https://github.com/babel/babel-loader/issues/789#issuecomment-491554727
Solution 5 - Javascript
Unexpected token "<" in this case comes from a nested path. Components that are in the nested are late to read.
This is the option that you can do:
- Check this https://reactrouter.com/web/example/nesting for documentation
- Make the nested path some switch logic with default return. In this component. Take a look at the documentation.
>
- In my case, i'm not use that, i make the single path and i send the parameter with a reducer.