[英]I am not able to add material-ui in my react project
The errors I am getting are: bundle.js:1168 Warning: React.createElement: type should not be null, undefined, boolean, or number.我得到的错误是:bundle.js:1168 警告:React.createElement:类型不应为空、未定义、布尔值或数字。 It should be a string (for DOM elements) or a ReactClass (for composite components).
它应该是一个字符串(对于 DOM 元素)或一个 ReactClass(对于复合组件)。 Check the render method of
AddBillForm
.检查
AddBillForm
的渲染方法。
bundle.js:778 Uncaught Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. bundle.js:778 Uncaught Invariant Violation: 元素类型无效:需要字符串(对于内置组件)或类/函数(对于复合组件)但得到:对象。 Check the render method of
AddBillForm
.检查
AddBillForm
的渲染方法。 I AM USING WEBPACK and ES6.我正在使用 WEBPACK 和 ES6。 Please try to provide a fiddle example with datepicker material UI
请尝试提供一个带有日期选择器材质 UI 的小提琴示例
//MyButton.jsx //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 (Here I am using MyButton component) //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 //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 (This is my webpack config) //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'
}
]
}
}
I had a similar problem and that was solved by changing the way I imported the material-ui components.我遇到了类似的问题,通过更改导入 material-ui 组件的方式解决了这个问题。
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 组件(如果您有任何其他组件)。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.