1、ERROR in ./src/entry.js

Module build failed: SyntaxError

解决方法:

安装babel-preset-react,  npm install --save-dev babel-preset-react

修改webpack配置文件,添加preset选项

2、ERROR in bundle.js from UglifyJs

Unexpected token: punc ()) [bundle.js:25884,14]

在添加并使用react-router-dom后,编译报错

解决方法:安装babel-preset-es2015 ,然后配置.babelrc文件

具体用法查看:https://babeljs.io/docs/plugins/preset-es2015/

3、Warning: It looks like you're using a minified copy of the development build of React.

When deploying React apps to production, make sure to use the production build which skips development warnings and is faster. See https://fb.me/react-minification for more details.

根据 https://reacttraining.com/react-router/web/example/basic给出的例子,编译没报错,页面打开时,控制台出现警告,点击链接时报错

Uncaught DOMException: Failed to execute 'pushState' on 'History': A history state object with URL 'file:///E:/about' cannot be created in a document with origin 'null' and URL

解决警告方法:修改webpack配置文件,添加如下内容

网上暂时没找到直接的解决方法,只能一步步查找原因,将Route上的exact去掉后,发现页面可以显示Home内容,所以路由是没问题的,问题在Link上面

关于Route exact,官方文档给出的说明如下,看了之后还是没太明白o(╯□╰)o,大致理解就是不加exact,默认首页显示patch为“/”的页面,加了之后exact后,匹配路径时要求更严格一些

4、使用箭头函数时编译报错

解决方法:安装babel-preset-stage-1

npm install babel-preset-stage-1  --save-dev

修改配置文件,添加stage-1选项

参考:http://blog.csdn.net/wq_static/article/details/51330780

5、cannot read push of undefined

使用this.context.router.push("about")进行页面跳转时报错

解决方法:添加如下内容

6、Uncaught TypeError: n.context.router.push is not a function

使用版本如下:

解决方法:

将 this.context.router.push("about") 换成

this.context.router.history.push("about")

参考:this-context-router-push-is-not-a-function

webpack react 错误整理的更多相关文章

  1. webpack+react+redux+es6开发模式

    一.预备知识 node, npm, react, redux, es6, webpack 二.学习资源 ECMAScript 6入门 React和Redux的连接react-redux Redux 入 ...

  2. webpack+react+es6开发模式

    一.前言 实习了两个月,把在公司用到的前端开发模式做个简单的整理.公司里前端开发模式webpack+react+redux+es6,这里去掉了redux. webpack, react, redux等 ...

  3. webpack+react+redux+es6

    一.预备知识 node, npm, react, redux, es6, webpack 二.学习资源 ECMAScript 6入门 React和Redux的连接react-redux Redux 入 ...

  4. 手把手教你如何使用webpack+react

    上一篇随笔讲述了新手入门入门前端 里面提到的第四阶段跟上当前前端的发展需要入门一个框架和自动化工具,当时推荐的是webpack+react 今天正好有空,也把自己入门webpack + react 的 ...

  5. webpack+react+redux+es6开发模式---续

    一.前言 之前介绍了webpack+react+redux+es6开发模式 ,这个项目对于一个独立的功能节点来说是没有问题的.假如伴随着源源不断的需求,前段项目会涌现出更多的功能节点,需要独立部署运行 ...

  6. Webpack+React项目入门——入门及配置Webpack

    一.入门Webpack 参考文章:<入门Webpack,看这篇就够了> 耐心看完这篇非常有帮助 二.React+Webpack环境配置 参考文章:<webpack+react项目初体 ...

  7. webpack react 单独打包 CSS

    webpack react 单独打包 CSS webpack require css的方法,默认会把css 打入到js文件中,加载顺序有问题,如果需要打出独立的css文件 操作步骤: step1: 安 ...

  8. 最小白的webpack+react环境搭建

    本文也同步发表在我的公众号“我的天空” 从零开始,用最少的配置.最少的代码.最少的依赖来搭建一个最简单的webpack+react环境. 最近在玩webpack+react+移动端,那么第一步自然是搭 ...

  9. 搭建 webpack + react 框架爬坑之路

    由于工程实践需要搭一个 webpack + react 框架,本人刚开始学,就照b站上的react黑马视频做,爬过无数个坑...希望读者能引以为戒.我的是macos系统 https://www.bil ...

随机推荐

  1. "学霸"系统Alpha版本发布说明

    一.版本功能 我们的软件为学霸app,目标功能为:北航校内学子的类“知乎”应用,可以实现用户的管理.提问.回答.搜索.上传.下载以及交互:当前版本主要实现功能为:用户的管理.提问.回答已经交互. 一下 ...

  2. 20135220谈愈敏Blog5_系统调用(下)

    系统调用(下) 谈愈敏 原创作品转载请注明出处 <Linux内核分析>MOOC课程 http://mooc.study.163.com/course/USTC-1000029000 给Me ...

  3. linux 常用命令-ps(process state)

    ps -ef | grep 端口号:查看某个端口的占用情况 ps -tunlp | grep 端口号:查看占用端口的进程名称

  4. FASIC: A Fast-recovery, Adaptively Spanning In-band Control Plane in Software-Defined Network

    2017 IEEE Global Communications Conference 问题:in-band网络中如果物理链路阻塞或者硬件故障,导致控制器的消息不能及时到达各个交换机导致网络不一致甚至某 ...

  5. PAT 1001. A+B Format 解题

    GitHub PDF 1001. A+B Format (20) Calculate a + b and output the sum in standard format -- that is, t ...

  6. PAT 甲级 1022 Digital Library

    https://pintia.cn/problem-sets/994805342720868352/problems/994805480801550336 A Digital Library cont ...

  7. selectTree & bug

    selectTree & bug 相对路径 & 绝对路径 http://192.168.58.189:8080/hui/#/components/selectTree https:// ...

  8. Delphi : 制作程序启动欢迎界面

    制作欢迎界面的代码,大家参考 登陆窗体命名為:loginform.找到工程文件(Project -> View Source),找到如下代碼部分:begin   Application.Init ...

  9. angular学习总结

    因为学习需要,要配置一系列环境,中间又出了很多各种各样的花式错误,因此当做个人总结记录一下.一.vs1. 完全卸载VS2013找到vs2013的安装包,如图 打开cmd命令行窗口,cd到安装包下的vs ...

  10. 解题:CF1055F Tree and XOR

    题面 树上路径是可以通过到根的路径和LCA差出来的,所以建立一棵Trie树按位贪心即可......吗? 发现空间并不够,需要我们每层现建,要记录每个数和它异或答案之后在这一层插进去的编号 #inclu ...