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. 20135337朱荟潼 Linux第四周学习总结——扒开系统调用的三层皮(上)

    朱荟潼 + 原创作品转载请注明出处 + <Linux内核分析>MOOC课http://mooc.study.163.com/course/USTC 1000029000 知识点梳理 一.用 ...

  2. 第二章:蓝色巨人 IBM公司

    COBOL(面向商业的通用语言) DEC(数字设备公司)华生实验室 造成失败的原因: 1,没有经营终端消费型产品 2,技术的流失 3.没有在意对手 成为的方法:合并,保守,谨慎 研究员的工作: 1,发 ...

  3. d3 数学方法(伪随机数生成器 )

    一.正态(高斯)分布(normal (Gaussian) distribution)的随机数 /* var nomarlRandmo = d3.random.normal(); console.log ...

  4. ci test

    下载ci 版本 3.1.9 下载地址 https://www.codeigniter.com/ 怎么查看CI的版本信息?想看某个项目中使用的CI具体是哪个版本,怎么查看?system\core\cod ...

  5. [转帖]Application Request Route实现IIS Server Farms集群负载详解

    Application Request Route实现IIS Server Farms集群负载详解  https://www.cnblogs.com/knowledgesea/p/5099893.ht ...

  6. Session, Cookie区别

    答: 1.Session由应用服务器维护的一个服务器端的存储空间:Cookie是客户端的存储空间,由浏览器维护. 2.用户可以通过浏览器设置决定是否保存Cookie,而不能决定是否保存Session, ...

  7. 阿里云ECS提示RHSA-2017:3263: curl security update

    服务器配置: 原因阿里云安装的CentOS 7.3的curl和libcurl的源不是最新的,会导致安全漏洞出现 方法首先还是要在实例列表远程连接打开终端. 1.更新ca-bundle1.备份: cp ...

  8. Git合并的代码 不提交服务器的方法

    使用Git下载代码的时候,常遇到合并的情况,然后再上传的时候,系统就会自动把合并代码的过程也上传,有时候会感觉非常的烦Merge remote-tracking branch 'choose_remo ...

  9. JS发送跨域Post请求出现两次请求的解决办法

    原文地址: http://www.cnblogs.com/JimmyBright/p/7681097.html 所有跨域的js在提交post请求的时候,如果服务端设置了可跨域访问 public sta ...

  10. bzoj5164: 餐厅计划问题(三分+贪心)

    网络流经典题里餐巾计划的加强版...天数变成了$10^5$,那就不能用费用流做了... 考虑费用流的时候,单位费用随流量的增加而减少,也就是说费用其实是个单峰(下凸)函数. 那么可以三分要买的餐巾个数 ...