Why JSX part is causing syntax error: unexpected token error while deploying?

I have built a MERN application and trying to deploy it on render.com

The JSX part is causing error as:

                           SyntaxError: dist/client/src/App.js: Unexpected token (35:8)
Dec 10 01:30:11 PM    33 |     }, []);
Dec 10 01:30:11 PM    34 |     return (
Dec 10 01:30:11 PM  > 35 |         <react_router_1.Routes>
Dec 10 01:30:11 PM       |         ^
.....
.....

I tried to add babel dependencies in my package.json:

"@babel/cli": "^7.10.3",
"@babel/core": "^7.10.3",
"@babel/node": "^7.10.3",
"@babel/preset-env": "^7.10.3",

But still, the error persists. please guide me.

Hi there,

I’m not overly familiar with React/Babel set ups, but from a quick Google, it seems you may have to add some configuration (presets?), not just dependencies.

For example, this Stackoverflow post seems to be a similar issue: https://stackoverflow.com/questions/33460420/babel-loader-jsx-syntaxerror-unexpected-token

Hope that helps

Alan

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.