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;

Hyonhyoscine

I'm not sure why you're coupling server side Node code with client side React code... – Hodometer

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. – Hyonhyoscine

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. – Hodometer

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 – Hyonhyoscine

Post your full app.js so we can help figure out where the error comes from – Hodometer

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. – Hyonhyoscine

Were you ever able to figure this out? – Parik

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? – Nyeman

SyntaxError: Unexpected token < in app.js:1 indicate that you have minified/uglyfied your code, and it is practically impossible to debug. Enable sourcemaps in your build (browserify+reactify) so that you can debug in the browser. – Fabiano

Answer 1

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>

Grove

Add <base href="/" /> into the <head> of index.html (from here: https://mcmap.net/q/190235/-react-router-dynamic-segments-crash-when-accessed) – Kamin

Answer 2

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.

Appressed

Answer 3

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

Firecure

Answer 4

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

Candra

Answer 5

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:

1. Check this https://reactrouter.com/web/example/nesting for documentation
2. Make the nested path some switch logic with default return. In this component. Take a look at the documentation.

<RealtyPage id={req.params.id}

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

Longdistance