CODEWITHSUNDEEP
nginxreact-router
Cliche7
Cliche7

Reputation: 109

Unexpected token < with React Router & Nginx

Router configuration:

const routes =
[
    {
        path: '/',
        component: Layout,
        onEnter: sessionFilter,
        indexRoute:
        {
            component: ActivityIndex,
            onEnter: sessionFilter
        },
        childRoutes:
        [
            {
                path: 'login',
                component: LoginPage
            },{
                path: 'activity-new',
                component: ActivityNew,
                onEnter: sessionFilter
            },{
                path: 'activity-edit/:id',
                component: ActivityEdit,
                onEnter: sessionFilter
            }
        ]
    }
];

ReactDOM.render(<Router routes={routes} history={browserHistory}/>, Node);

Nginx configuration:

server {
    listen 5002;
    location / {
        root www/bc;
        index index.html;
        try_files $uri $uri/ /index.html;
    }
}

All files transpiled with babel(webpack). It works fine when I access http://server:5002/something but throws an Unexpected token < if I access http://server:5002/something/1 or http://server:5002/something/.

When I looked at the Sources tab in the Developer Tools I noticed that the js file has been returned with the index.html as its content which is caused by the Request URL pointing to http://server:5002/something/app.js instead of http://server:5002/app.js. Do I need to add something to the configuration to solve this issue?

Upvotes: 4

Views: 3902

Answers (1)

steppefox
steppefox

Reputation: 1844

I think the problem in src path of your JS file in script tag.

Instead of <script src="app.js"></script>, use: <script src="/app.js"></script>

Upvotes: 3

Related Questions