Reactjs “SyntaxError: Unexpected token <” while npm start

Question

The react app that I have is an old code and I am trying to build my react app with the following command to complete the setup of the project.

npm run-script build

Here is the configuration in package.json

"webpack": "^3.12.0",
"webpack-cli": "^3.3.0",
"webpack-dev-server": "^2.11.5"
"babel-core": "^5.8.20",
"babel-loader": "^5.3.2",

and my node and npm versions are

node 10.15.3 
npm v6.4.1

my routes.js looks like

module.exports = (
  <Router history={history}>
    <Route path='list' component={Roadshows} />
  </Router>
)

I tried installing different versions of webpack, webpack-dev-server and babel-loader.

/home/local/TAG/vigneshs/project/react/roadshow/roadshow_frontend/routes.js:62
  <Router history={history}>
  ^

SyntaxError: Unexpected token <

When I try to start my server using

npm start

I getting the same error.

can anyone please do guide to complete the setup of the project. Am I missing anything?

The Error is clearly shouting that there is something wrong in routes.js line 62. and also clearly says the error is an unexpected token. what was the reason that you have not checked that file? — Amir-Mousavi
I have checked that file, but the syntax is correct. I have updated the routes.js file also. The error isn't that character. There is some package version mismatch. — Vicky
this may be similar to--or a duplicate of: stackoverflow.com/questions/36392826/… — worc
@worc, Yes I do. I use presets --> babel-preset-es2015 & babel-preset-react and I use the following in .babelrc { "presets": ["es2015", "react"] } — Vicky

namth namth · Accepted Answer · 2019-04-02T15:58:20

You should not using module.exports to export component. Try following:

export default () => (
  <Router history={history}>
    <Route path='list' component={Roadshows} />
  </Router>
);

and then, import it

import routes from 'routes'