javascript - React Router - Uncaught SyntaxError: Unexpected token < when refreshing an URL with params

I am using react 16 and react router 4, webpack and webpack dev server.

I do have the following Route:

<Route path="/pany/:symbol" render={this.getCompanyPageRoute} />

And I do navigate to this route through the following:

this.props.history.push('/pany/blablabla');

Everything works fine. But if I refresh the page with this URL, I get the following error:

Uncaught SyntaxError: Unexpected token <

I've seen that there are several posts of this error, but I was not albe to fix the issue following those links.

I am using react 16 and react router 4, webpack and webpack dev server.

I do have the following Route:

<Route path="/pany/:symbol" render={this.getCompanyPageRoute} />

And I do navigate to this route through the following:

this.props.history.push('/pany/blablabla');

Everything works fine. But if I refresh the page with this URL, I get the following error:

Uncaught SyntaxError: Unexpected token <

I've seen that there are several posts of this error, but I was not albe to fix the issue following those links.

Share Improve this question asked Sep 13, 2018 at 12:33 quirimmo 9,9883 gold badges32 silver badges45 bronze badges

If you refresh the page with this URL, the browser will try and load it, long before React es into play. Unless your server is set up accordingly (i.e. always serves the index.html file), it cannot handle the request and will send back a 404 error page or something like that. – user5734311 Commented Sep 13, 2018 at 12:36
I am running only locally with webpack-dev-server and I do not have a 404, but I do have that error in my bundle.js – quirimmo Commented Sep 13, 2018 at 12:37
can you show your getCompanyPageRoute function definition? – Pavan Commented Sep 13, 2018 at 12:38
Try doing a simple render= { <div> this is a pany page </div> } – Pavan Commented Sep 13, 2018 at 12:38
@Pavan it simply returns a ponent public getCompanyPageRoute(routeProps: object) { return <CompanyPage /> } – quirimmo Commented Sep 13, 2018 at 12:39

| Show 3 more ments

3 Answers 3

Sorted by: Reset to default 14

Posting the answer if it could help someone else.

Changing the output property of the webpack config to the following fixed the issue:

output: {
        path: BUILD_DIR,
        publicPath: '/',
        filename: 'bundle.js',
    }

The trick is made by: publicPath: '/'

try this

You just need to add <base href="/" /> into the <head> of your index.html. This resolved my problem. It may help you too.

https://github./vuejs-templates/pwa/issues/165#issuement-419709072

I just had the same issue.

In my case, I had to add publicPath: '/' as you mentioned in your answer and an opening / in my script-src.

output: {
    path: path.join(__dirname, "/public/dist"),
    publicPath: '/',
    filename: "[name].js",
}

Before: <script src="dist/main.js"></script> (missing the opening /)

After: <script src="/dist/main.js"></script>