最近项目由react0.14.X升级到react 15版本,因为react15还是做了一些相对大一点的更新的(详情可以参考一下我的另一篇文章关于react15的一点总结),相对;来说react升级之后但react问题并不太多。但是react相应的配置,例如babel,react-hot-loader等相也做了一些升级。放到一起来说问题还是多一点的。这里把遇到的一些问题和注意点拿出来给大家分享一下,能避免的坑还是要尽量绕开的不是。

  一、首先react15的包分成了react和react-dom两部分分别打包,所以用到react-dom的地方,导入的位置就要换掉了。如下面图示:

  二、react,babel是环环相扣的。升级了react之后升级babel是在所难免的过程了,

注意升级的顺序,babel->babel-*其他相关项->babel-core。原有相关依赖项不先行升级的话对babel-core的是有版本要求的,会导致升级失败。

  三、升级babel之后,原有babel5的写法已经被废弃,所以会报错:

    ReferenceError: [BABEL] XXXX.jsx: Unknown option: stage(或loose)

babel6只支持presets和plugins两个属性了。babel 最新版本babel6的相关配置解析可以看下这篇文章。此外,如果少引用了某个插件。会有类似下面的报错:

    Module build failed: SyntaxError: index.js: Unexpected token 

 四、如果你用到了react-hot-loader实现热加载的话,会遇见下面的错误: 
Cannot resolve module 'react/lib/ReactMount'
switch to react-hot-loader 3.x!

刚才提到的相应配置也要升级,这是比较麻烦的一点。所以react-hot-loader要升级到3.X,不过我发现npm上最新的版本竟然也是beta版,希望不会有其他变动。

  五、仅仅是把react-hot-loader升级到3.X还不算完,升级完之后react-hot-loader的用法也要有相应改变。此时会有下面的错误:

  不能像原来一样在webpack中直接加载react-hot-loader:

  需要从webpack中移除react-hot loader。.barbelrc中增加plugins属性:react-hot-loader/babel。此处问题比较多,大致应该装以下预设和插件(babel 最新版本babel6的相关配置解析可以看下这篇文章,更好理解):

    

  六、上面说到的相关配置还有一个,如果你用到react-router的话。同样需要升级到3.X版本,如果是1.X的版本的写法也需要做些改变,当遇到下面的错误时:

  

根据hash匹配的路由,不需要自己创建hsitory对象,直接导入react-router 3.X 现有的hashHistory对象即可。

  七、react15官方文档中提到,增加了比较人性化的报警和错误信息。但是个人认为有点矫枉过正的感觉,下面的warning是肯定会看到的:

官方解释:You are using a non-standard DOM attribute, perhaps to represent custom data. Custom data attributes should always have a data- prefix, as described in https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes

也就是说,如果不是dom元素原生的属性的话,必须要带上data-,否则认为是unknown的,就会报警。但是个人认为现在提这个所谓的规范有点为时已晚,因为大型的项目都已经比较成熟了,如果为了这个标准再去修改相应的内容,大部分人应该是不情愿的,有种矫枉过正的感觉。考虑到大家的反馈,react开发小组的成员已经妥协了,未来的版本会去掉这种校验。In future versions of React we plan to pass such props “through” without the whitelist。

  八,建议避免bind来绑定this,可以用箭头函数来替换。不然babel转译的时候会有报错的情况。

  以上就是本次项目升级过程中暂时碰到一些问题,做个总结为后面的同学做个参考。对于还没有升级的项目,个人建议暂时不要升级了,毕竟有些配置还是非稳定版本,等稳定了再动。这次升级我只是在备用分支上做了操作,目前来看还是比较明智的。在升级的过程中有好多问题,搜索引擎是不给力的,还是需要自己摸索的,所以感觉有必要总结一下给后来者一个参考,共同学习提高。

升级react 15.4,常见的错误及解决方案的更多相关文章

  1. React 学习过程中常见的错误

    1,  react报错Module not found: Error: Can't resolve     解决:  一般是加载文件的路径写错了:      

  2. java项目中初期常见的错误及解决方案

    在做项目的初期,想必总会有各种奇奇葩葩的错误出现,本博文主要整理了博主在项目初期遇到的错误,希望能为大家减少犯这些错误 1.Env 名字写错了,图片中错误类型是名字没有发现的异常,因此需要检查后面报错 ...

  3. MySQL主从 常见的错误及解决方案

    一.错误日志解析: (1) [ERROR]1452:无法在外键的表插入参考主键没有的数据 1452:无法在外键的表插入或更新参考主键没有的数据.由于item_discovery.itemid字段(外键 ...

  4. 将react升级到15之后的坑

    问题来源: 运用ant-design 的metion组件必须要使用react 15.x以上的版本,而目前所用的版本是 react 0.14.x版本,所以就不得不对react进行升级   出现的问题: ...

  5. react 15

    react 15 最近项目由react0.14.X升级到react 15版本,因为react15还是做了一些相对大一点的更新的(详情可以参考一下我的另一篇文章关于react15的一点总结),相对:来说 ...

  6. 新手学习Python时常见的错误

    最近学习Python,现在把一些常见的错误总结如下: 1)忘记在 if , elif , else , for , while , class ,def 声明末尾添加 :(导致 "Synta ...

  7. php常见细节错误

    PHP编程中10个最常见的错误 PHP是一种非常流行的开源服务器端脚本语言,你在万维网看到的大多数网站都是使用php开发的.本篇经将为大家介绍PHP开发中10个最常见的问题,希望能够对朋友有所帮助. ...

  8. TCP/IP 某些最常见的错误原因码 (errno)列表

    对于在基于 UNIX 的环境中的 TCP/IP 用户,下表列出了某些最常见的错误原因码 (errno).它不是完整的错误列表.可以在文件 /usr/include/sys/errno.h 中找到 Er ...

  9. HTML5几种常见的错误写法

    本文介绍了HTML5常见的6种错误写法,包括:1.不要使用section作为div的替代品 2.只在需要的时候使用header和hgroup 3.不要把所有列表式的链接放在nav里 4.figure元 ...

随机推荐

  1. hdu4607 Park Visit(树的直径)

    Park Visit Time Limit: 6000/3000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total ...

  2. Quartus II中的Waring(转)

    1.Found clock-sensitive change during active clock edge at time <time> on register "<n ...

  3. Linux驱动学习之什么是驱动?

    一.什么是驱动? 1: 驱动一词的字面意思 2: 物理上的驱动 3: 硬件中的驱动 4: linux内核驱动.软件层面上的驱动广义上是指:这一段代码操作了硬件去动,所以这一段代码就叫硬件的驱动程序. ...

  4. 打出10的n次方,上标,下标等处理方法(mac)

    我使用mac系统遇到的需求,需要在项目中显示10的6次方 用来做单位,找了很多方案,word等文本编辑工具很好实现(word是使用ctrl + shift + =)(mac  版的word是 Comm ...

  5. Ajax完整结构和删除

    1.ajax完整结构 注意:(1)最后一个没有"," (2)ajax对网速要求高,最好有各种提示和使用按钮(可使其失效,防止重复加载) $.ajax({ url: "aj ...

  6. Android开发环境

    1: JDK 2: Eclipse 3: Android SDK 4: ADT

  7. docker安装

    系统要求:需要一个64位的centos7操作系统和版本3.10或更高版本的Linux内核 开始安装: uname -r   //查看内核版本yum -y update //更新系统更新到最新 #安装d ...

  8. x-editable 的使用方法

    1.首先在html网页中定义一个a标签(如下<%#%>是asp.net的语法) <a href="#"  data-pk="<%#Eval(&qu ...

  9. java 访问mysql 实例

    前提条件: 1.安装eclipse,mysql.java jdk 2.安装mysql connect J  (我安装的版本是mysql connect J 5.1.39) 3.配置java环境变量 4 ...

  10. 【简易版】HashMap(增删改查)

    1.HashMap概述 (1)首先HashMap是基于哈希表的Map接口实现的.另外HashMap中存储的数据是按照键值跟键值对的关系来进行存储的. (2)不同于ArrayList方法的是,Array ...