React Webpack报错

记录一些react + webpack 开发时候报错的问题

anonymous function

匿名函数

Uncaught Invariant Violation: Team.render(): 
A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object

return里面的元素不完整 可能返回了undefined或数组或其他非法对象

this.props.json.map is not a function 

.map方法是Array的方法，如果json是{} 那就是Object 不是Array下次同样报错，先查这个对象有没有XXX方法 没有就可能是not a function

Cannot update during an existing state transition (such as within `render` or another component's constructor).
Render methods should be a pure function of props and state; constructor side-effects are an anti-pattern
but can be moved to `componentWillMount`.

在render和其他组件的构造器（constructor）中不可以this.setState 必须保持’纯函数’

Failed to execute 'appendChild' on 'Node' parameter 1 is not of type 'Node'.

npm install react@15.0.1 开发建议用这版，其他版本（如15.0.0和15.0.3）会报解析错误 因为关于子组件的传值，比如：
<abc name='sss'/> 其他版本会觉得name属性是不能做为子组件的props

expected a string (for built-in components) or a class/function (for composite components) 
but got: object. Check the render method of `CommonPanel`.

本来想a->b->c 发现b里面没有引入c文件 而是引入了自己本身的b文件 造成语法混乱

Unterminated JSX contents

未结束的jsx语法 一般是标签缺少另一半

Super expression must either be null or a function, not undefined

发现错误是 var loading = React.createClass({}); loading应该Loading大写。记得组件都必须大写第一个字母

use the non-minified dev environment for the full error message and additional helpful warnings.

提示你不要用react.min.js开发，用react.js 和 react-dom.js开发会获取更多报错提示（但是上线时候还是用min.js）

Minified exception occurred; 
use the non-minified dev environment for the full error message and additional helpful warnings.

最后发现是packge.json不一样

Error: Minified exception occurred; 
use the non-minified dev environment for the full error message and additional helpful warnings.

【！！！让你webpack用-d模式查看更多报错信息 但是记住-d模式在部分安卓手机有不兼容代码 布置时候不要-d】

Warning: React.createElement: type should not be null, undefined, boolean, or number. 
It should be a string (for DOM elements) or a ReactClass (for composite components). 
Check the render method of `LoginPanel`.

就是字面上的意思，LoginPanel的render里面引入了符合组件，而组件模块内用了try catch 把返回值变成object,这个问题是当初手机调试 因为看不见console，我把一个模块都try-catch了 结果modoule.export时候变成export了一个obejct而不是react element(function或者class)

Uncaught Invariant Violation: 
Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) 
but got: object. Check the render method of `LoginPanel`.

发现是单个模块里面用了try catch，导致exsport变成一个object
而 var modoule = require('./a')希望a是一个function或者class,而不是object

Uncaught Invariant Violation: 
Objects are not valid as a React child 
(found: object with keys {schoolId, name, currencyId, value, icoCoinUrl, icoLogoUrl, icoSignUrl}). 
If you meant to render a collection of children, 
use an array instead or wrap the object using createFragment(object) from the React add-ons.
Check the render method of `Loading`.

在一个循环里面 我返回了<li>标签 里面属性有{json} 但是这个json是一个object（里面也有其他属性,比如json.name） 不能返回object变量
如果需要只能用arr.push(<li>)来返回
最后我是return <li data-week={json.week}>{json.content}</li>
原来写的是：return <li data-week={json}>{json}</li>

Uncaught Invariant Violation: _registerComponent(...): Target container is not a DOM element.

js里面

ReactDOM.render(
    <Loading/>,
    document.getElementById('react')
    );

可能在jsp没有id=react这个标签