Reactjs 我无法在react项目中添加材质ui

我得到的错误是： bundle.js:1168警告：React.createElement:类型不应为null、未定义、布尔值或数字。它应该是字符串（对于DOM元素）或ReactClass（对于复合组件）。检查

AddBillForm

的渲染方法

bundle.js:778未捕获不变冲突：元素类型无效：需要字符串（对于内置组件）或类/函数（对于复合组件），但得到：对象。检查

AddBillForm

的渲染方法。 我正在使用WEBPACK和ES6。 请尝试提供datepicker材质UI的小提琴示例

//MyButton.jsx

var React = require('react');
var RaisedButton =  require('material-ui/RaisedButton');
var MyButton = React.createClass({

    render: function()
    {

        return (
            <Link to={this.props.to}>{this.props.message}</Link>

        );
    }
});

module.exports = MyButton;

---

我遇到了一个类似的问题，通过改变导入材质ui组件的方式解决了这个问题

尝试改变

var MuiThemeProvider = require('material-ui/styles/MuiThemeProvider');
var RaisedButton =  require('material-ui/RaisedButton');

到

以及所有其他材质ui组件（如果有）

var React = require('react');
var ReactDOM = require('react-dom');
var {Route, Router, IndexRoute, hashHistory} = require('react-router');
var RaisedButton =  require('material-ui/RaisedButton');

var GetMyBillsMain = require('./components/getMyBills/GetMyBillsMain');
var AddBillMain = require('./components/addBillDetails/AddBillMain');
var AddBiller =  require('./components/selectBiller/AddBiller');
var BillDetailsMain = require('./components/billDetails/BillDetailsMain')

// Load foundation
require('style!css!bootstrap/dist/css/bootstrap.min.css')

// App css
require('style!css!bootstrapStyles')
require('style!css!customStyles')



ReactDOM.render(
        // <Main></Main>
        <Router history={hashHistory}>
            <Route path="/" component={GetMyBillsMain} />
            <Route path = "selectBiller" component = {AddBiller} />
            <Route path = "addBillDetails" component = {AddBillMain} />
            <Route path = "billDetails" component = {BillDetailsMain} />
        </Router>
        , 
    document.getElementById('main'));

var webpack = require('webpack');
var ExtractTextPlugin   = require("extract-text-webpack-plugin");


module.exports = {
    entry: [
    'script!jquery/dist/jquery.min.js',
    'script!bootstrap/dist/js/bootstrap.min.js', 
    './app/app.jsx'
    ],
    externals: {
        jquery: 'jQuery'
    },
    plugins: [
        new webpack.ProvidePlugin({
            '$': 'jquery',
            'jQuery': 'jquery'
        })
    ],
    output: {
        path: __dirname,
        filename: './public/bundle.js'
    },

    resolve: {
        root: __dirname,
        alias: {
            bootstrapStyles : 'bootstrap/dist/css/bootstrap.min.css',
            customStyles: 'app/styles/style.css'
        },

        extensions: ['', '.jsx', '.js' ]
    },
    module : {
        loaders: [
            {
                loader: 'babel-loader',
                query : {
                    presets: [
                        'react', 'es2015'
                    ]
                },
                test: /\.jsx?$/,
                exclude: /(node_modules| bower_components)/
            },
            {
                test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/, 
                loader: 'url?limit=10000&mimetype=application/font-woff'
              },
              {
                test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, 
                loader: 'url?limit=10000&mimetype=application/octet-stream'
              },
              {
                test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, 
                loader: 'file'
              },
              {
                test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, 
                loader: 'url?limit=10000&mimetype=image/svg+xml'
              }
        ]
    }
}

var MuiThemeProvider = require('material-ui/styles/MuiThemeProvider');
var RaisedButton =  require('material-ui/RaisedButton');

var {MuiThemeProvider} = require ('material-ui/styles');
var {RaisedButton} =  require('material-ui');