Unexpected token < error in react router component
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>
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 :)
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.