CODEWITHSUNDEEP
reactjsreact-routerbabeljsbabel-loader
Vicky
Vicky

Reputation: 56

Reactjs "SyntaxError: Unexpected token <" while npm start

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?

Upvotes: 0

Views: 1912

Answers (2)

Vicky
Vicky

Reputation: 56

I resolved this issue by reducing versions of my webpack and webpack-dev-server as,

webpack v1.10.5
webpack-dev-server v1.10.1

and also I used lower version of node and npm

node v8.15.1
npm v6.4.1

I guess the issue I had was --> webpack@3 and webpack-dev-serve@2 which I used earlier didnot support babel-loader@5

Upvotes: 0

namth
namth

Reputation: 3117

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'

Upvotes: 2

Related Questions