react render method invalid syntax error

Question

I have index.js like this

import React from 'react'
import { render } from 'react-dom'
import { Provider } from 'react-redux'
import Login from './containers/Login'
import configureStore from './store/configureStore'

const store = configureStore()

render(
    <Provider store={store}>
        <Login />
    </Provider>,
  document.getElementById('root')
)

when I build this with npm run build it gives me syntax error. What might be wrong in here ?

render( > 10 | <Provider store={store}> | ^ 11 | <Login /> 12 | </Provider>, 13 | document.getElementById('root') — varad
– varad, Commented Jan 25, 2016 at 12:08
Looks like it doesn't know how to process JSX. Are you sure you really transpile your JSX in your index.js? — Daniel Macak
– Daniel Macak, Commented Jan 25, 2016 at 12:09

Daniel Macak · Accepted Answer · 2016-01-25 12:29:52Z

1

You are using JSX, so you must transpile them (I would suggest using Babel, which can transpile both JSX and ES6).

Otherwise, you could go without JSX using this

render(
  React.createElement(Provider, {store: store},
    React.createElement(Login, {})
  ),
  document.getElementById('root')
);

answered Jan 25, 2016 at 12:29

Daniel Macak

17.3k4 gold badges34 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

react render method invalid syntax error

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related