CODEWITHSUNDEEP
javascriptreactjshtml5-history
Sergey Troinin
Sergey Troinin

Reputation: 693

Unexpected token < error in react router component

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;

Upvotes: 54

Views: 38512

Answers (5)

darkscripter
darkscripter

Reputation: 425

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}

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

Upvotes: 1

Thibaut
Thibaut

Reputation: 44

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

Upvotes: 1

Charles Vogt
Charles Vogt

Reputation: 121

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.

Upvotes: 6

jsdeveloper
jsdeveloper

Reputation: 4045

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

Upvotes: 5

Oded
Oded

Reputation: 2259

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>

Upvotes: 183

Related Questions