ReactDOM.render webpack Fehler

Question

gibt es diese ärgerliche Fehler, dass ich keine Ahnung, wie es ist ein Fehler,

ich MuiThemeProvider im reagieren dom wie diese

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

Rendering wurde aber webpack gibt mir diese Fehler:

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')); 

Ich versuchte ein div statt, hat nicht funktioniert. Ich habe versucht, es zu const, dann rufen Sie es in den Render, hat auch nicht funktioniert.

Ich verstehe nicht.

Hier wird die Datei 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 1

Es sieht so aus, als ob Webpack Ihren JSX-Code nicht erkennt. Sie müssen Webpack einrichten, um JSX zu transformieren. Ich benutze Babel um meinen JSC Code zu transformieren.

mein webpack.config.js:

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

Answer 2

zum Mui documentation Bezug es auf diese Weise behandelt wird:

const App =() => (
    <MuiThemeProvider muiTheme={getMuiTheme()}> 
    <Router history={browserHistory} routes={routes} /> 
    </MuiThemeProvider> 
); 

ReactDOM.render(
    <App />, 
    document.getElementById('react-app') 
); 

Als

weit ich weiß, sind Sie mehrere Elemente passieren nicht in der Lage in die ReactDOM.render(renderElement, DOMElement) Funktion (React Doc), so müssen Sie sie mit einer Reaktionskomponente ohne Status umhüllen.