React router parametrized routes: SyntaxError: expected expression, got '<'

Question

I have a React-router set up which uses parametrized routes:

<Route path="/comments" comments={comments.commentsArray} component={NewReactElement} />
    <Route path="/comments/:id" component={Comment} />

The error: SyntaxError: expected expression, got '<'

I have researched the error, and found out it was happening when the server tries to get a .js/.css/other file, but is returned HTML beginning with <!DOCTYPE> instead, so I set up the express.static, but when entering URL such as comments/1250, it still returns: SyntaxError: expected expression, got '<'. This is my server setup:

app.use(express.static(__dirname + '/views/webpacked'));
app.listen(5000);

app.get('*', (req, res) => {

    res.sendFile(path.resolve(__dirname, 'views', 'webpacked', 'index.html'));

 });

I have also tried:

app.use('/*/*', express.static(...));

But it did not work, either.

Thank you for advice in advance.

score 11 · Answer 1 · answered Jun 21 '16 at 16:09

11

I've got a react/react-router page without any express and got the same error: SyntaxError: expected expression, got '<' which started to appear as soon as I configured a react route other then just root /.

After some experimenting I've figured out that in my index.html there was a link to js file:

  <script src="bundle.js"></script>
</body>
</html>

So, the solution was to add / in the source path:

  <script src="/bundle.js"></script>
</body>
</html>

and the error has gone.

Hope that could help a bit.

answered Jun 21 '16 at 16:09

Hero Qu

911
9
10

Woah, It actually worked... I wonder why it works just fine without '/' when I access non-params routes – Jakub Kopyś Jan 31 '18 at 22:43
Thanks so much, this is THE ANSWER, i still wondering like Jakub Kopys the why of that stuff. – Merlyn007 Jan 07 '19 at 04:50

score 0 · Answer 2 · edited Jul 02 '21 at 05:14

0

After adding the / to bundle.js as this answer suggested the issue still persisted.

I was able to fix the issue by running rm -rf .cache in my project directory, as per this github issue.

edited Jul 02 '21 at 05:14

drhayes

581
3
16

answered Jun 30 '21 at 18:11

off-world-esper

1

React router parametrized routes: SyntaxError: expected expression, got '<'

2 Answers2

Linked