Unexpected token < error in react router component

Question

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;

I'm not sure why you're coupling server side Node code with client side React code... — Keith Yong, Apr 18 '15 at 14:48
I'm using grapnel library for client side routing. Object router created by var router = new Grapnel(). i'm try using other libraries, but result still the same. — Sergey Troinin, Apr 18 '15 at 14:55
Oh ok, my bad then, I thought it was express router in that code. Could you try linking your full source code? The error seems to be happening at line 1. It might be that you're missing JSXTransformer in your HTML scripts. — Keith Yong, Apr 18 '15 at 14:55
I'm use gulp and browserify + reactify. Error happens only when I'm go to the address contains '/'. I think problem somwhere in code, which work with Histor API, and all libraries use same piece of code for it. This is screen from Chome with error. [Error screen](https://drive.google.com/file/d/0B6d5yxDimF3xNEVKY3Zvby1XalU/view?usp=sharing) — Sergey Troinin, Apr 18 '15 at 15:14
Post your full `app.js` so we can help figure out where the error comes from — Keith Yong, Apr 18 '15 at 15:42
My full app.js its around 680kb of concats code, maked with browserify. I update my ask and post my Router component. Maybe it will be usefull. — Sergey Troinin, Apr 18 '15 at 15:53
I am facing the same problem, when using the htaccess to direct requests to the index.html (to avoid page for breaking in refresh). Have you been able to figure this out? — Jaakko Karhu, Oct 08 '15 at 08:00
`SyntaxError: Unexpected token < in app.js:1` indicate that you have minified/uglyfied your code, and it is practically *impossible* to debug. Enable [sourcemaps](http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/) in your build (browserify+reactify) so that you can debug in the browser. — arve0, Jan 11 '16 at 19:37

score 169 · Answer 1 · answered Feb 09 '16 at 21:31

169

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>

answered Feb 09 '16 at 21:31

Fastas

2,091
2
17
16

3

This solution is not an obvious one! Thanks. – otajor Jul 20 '16 at 07:45
1

Would never found this if it weren't for you. Thanks Fastas. – Erika Jul 20 '16 at 11:12
1

Very useful and happy to have this answer. – Mjuice Aug 22 '16 at 22:33
34

Add `` into the `` of `index.html` (from here: http://stackoverflow.com/a/34526066/4804896) – mqklin Jan 27 '17 at 06:48
Thanks a lot. I wasted an hour behind this problem. – rash.tay Apr 08 '17 at 13:23
So useful. Thanks – tommyd456 May 26 '17 at 10:14
I love you man, so stupid of me, with the router it was pointing to a different location. – TacoEater Jun 13 '17 at 19:56
That's exactly what happened to me! Thanks – Michel Arteta Aug 21 '17 at 18:22
I had a similar issues using Vue.js with SSR and dynamic routes. Accessing let's say: localhost/user/1 where 1 was a dynamic parameter would throw the error. Changing the webpack.config.js output publicPath from: '../dist/' to '/../dist/' did the trick – JOjohn May 05 '18 at 12:41
Thanks, that is awsome, i am quite surprise that problem relate to the script import style. – Gary Mar 06 '19 at 06:28
Fantastic explanation saved me so much time – cadenzah Aug 26 '19 at 10:22
Thanks @mqklin your solution saved me – Aleem Isiaka Nov 09 '19 at 11:18
What the hell, thanks for this answer! not easy to find out – Emixam23 Nov 11 '20 at 14:38
For some reason this `` trick was not required for my colleagues to make it work. May I know what else could interfere the behavior of `base`? @mqklin – Lil E Apr 06 '21 at 07:26

Charles Vogt · Answer 2 · 2019-12-26T17:11:11.380

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.

score 3 · Answer 3 · answered Mar 17 '19 at 18:16

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 :)

score 1 · Answer 4 · answered Jan 13 '20 at 13:11

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

score 1 · Answer 5 · answered Oct 20 '20 at 06:08

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.

<RealtyPage id={req.params.id}

In my case, i'm not use that, i make the single path and i send the parameter with a reducer.

Unexpected token < error in react router component

5 Answers5

Linked