reactjs - ReactDOM.render webpack error -

there annoying error have no idea how it's error,

i rendering muithemeprovider in react dom this

reactdom.render(   <muithemeprovider muitheme={getmuitheme()}>     <router history={browserhistory} routes={routes} />   </muithemeprovider>, document.getelementbyid('react-app')); 

but webpack giving me error:

error in ./client/src/app.jsx module build failed: syntaxerror: unexpected token (14:2)    12 |    13 | reactdom.render( > 14 |   <muithemeprovider muitheme={getmuitheme()}>      |   ^   15 |     <router history={browserhistory} routes={routes} />   16 |   </muithemeprovider>,   17 | document.getelementbyid('react-app')); 

i tried div instead, didn't work. tried adding const call in render, didn't work.

i don't understand.

here file code:

import react 'react'; import reactdom 'react-dom'; import injecttapeventplugin 'react-tap-event-plugin'; import getmuitheme 'material-ui/styles/getmuitheme'; import muithemeprovider 'material-ui/styles/muithemeprovider'; import { browserhistory, router } 'react-router'; import routes './routes.js';  // remove tap delay injecttapeventplugin();    reactdom.render(   <muithemeprovider muitheme={getmuitheme()}>     <router history={browserhistory} routes={routes} />   </muithemeprovider>, document.getelementbyid('react-app')); 

it looks webpack not recognizing jsx code. need set webpack transform jsx. use babel transform jsc code.

my webpack.config.js:

module.exports = { // ...     module:  {         rules: [             {                 test: /\.jsx?$/,                 exclude: /(node_modules|bower_components)/,                 use: {                     loader: 'babel-loader',                     options: {                         presets: ['env', 'react']                     }                 }             }, // ...         ]     } };