Abdulrahman Mushref Abdulrahman Mushref - 1 month ago 7
React JSX Question

ReactDOM.render webpack error

there is this annoying error that I have no idea how it's an error,

I was rendering

MuiThemeProvider
in the react dom like this

ReactDOM.render(
<MuiThemeProvider muiTheme={getMuiTheme()}>
<Router history={browserHistory} routes={routes} />
</MuiThemeProvider>,
document.getElementById('react-app'));


but webpack is giving me this 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 a div instead, didn't work. I tried adding it to const then call it in the render, also didn't work.

I don't understand.

Here is the file code:

import React from 'react';
import ReactDom from 'react-dom';
import injectTapEventPlugin from 'react-tap-event-plugin';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import { browserHistory, Router } from 'react-router';
import routes from './routes.js';

// remove tap delay
injectTapEventPlugin();



ReactDOM.render(
<MuiThemeProvider muiTheme={getMuiTheme()}>
<Router history={browserHistory} routes={routes} />
</MuiThemeProvider>,
document.getElementById('react-app'));

Answer Source

It looks like Webpack is not recognizing your JSX code. You need to set up webpack to transform JSX. I use babel to transform my 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']
                    }
                }
            }, // ...
        ]
    }
};