Question

有这个恼人的错误，我不知道它是怎么一个错误，

我在像这样的反应dom中渲染MuiThemeProvider

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

但是webpack给了我这个错误：

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

我尝试了一个div，但没有工作。我尝试将它添加到const然后在渲染中调用它，也没有工作。

我不明白。

这是文件代码：

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

看起来Webpack无法识别您的JSX代码。您需要设置webpack来转换JSX。我使用babel来转换我的JSX代码如下：

我的webpack.config.js：

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

Answer 2

参考Mui documentation以这种方式处理：

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

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

据我所知，你无法将多个元素传递给ReactDOM.render(renderElement, DOMElement)函数（React Doc），所以你必须使用没有状态的react组件来包装它们。

ReactDOM.render webpack错误

2 个答案: