Question

我得到的错误是： bundle.js：1168警告：React.createElement：type不应为null，undefined，boolean或number。它应该是一个字符串（对于DOM元素）或一个ReactClass（对于复合组件）。检查AddBillForm的呈现方法。

bundle.js：778 Uncaught Invariant Violation：元素类型无效：期望一个字符串（对于内置组件）或一个类/函数（对于复合组件）但得到：object。检查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;

// AddBillForm.jsx（这里我使用的是MyButton组件）

var React = require('react');
var ReactDOM = require('react-dom');

var MuiThemeProvider = require('material-ui/styles/MuiThemeProvider');
var GenericInputArea = require('../GenericInputArea');
var MyButton = require('../MyButton')

var AddBillForm=React.createClass({
    render: function()
    {
        return (
             <div className="row">
                <div className="col-md-12 col-sm-12 col-xs-12 biller-name">
                    <GenericInputArea placeholder="Enter your biller name" />
                </div>
                <div className="col-md-12 col-sm-12 col-xs-12 account-id">
                    <GenericInputArea placeholder="Enter 10 digit account Id" />
                    <p>What is my account id? Refer to sample bill below</p>
                </div>
                <MyButton  label = "testing"/>
            </div>
        );
    },
});

module.exports = AddBillForm;

// app.jsx

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

// webpack.config.js（这是我的webpack配置）

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'
              }
        ]
    }
}

Answer 1

I had a similar problem and that was solved by changing the way I imported the material-ui components.

Try change

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

to

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

and all other material-ui components if you have any other.

我无法在我的反应项目中添加material-ui

1 个答案: