webpack react 错误整理
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 错误整理的更多相关文章
- webpack+react+redux+es6开发模式
一.预备知识 node, npm, react, redux, es6, webpack 二.学习资源 ECMAScript 6入门 React和Redux的连接react-redux Redux 入 ...
- webpack+react+es6开发模式
一.前言 实习了两个月,把在公司用到的前端开发模式做个简单的整理.公司里前端开发模式webpack+react+redux+es6,这里去掉了redux. webpack, react, redux等 ...
- webpack+react+redux+es6
一.预备知识 node, npm, react, redux, es6, webpack 二.学习资源 ECMAScript 6入门 React和Redux的连接react-redux Redux 入 ...
- 手把手教你如何使用webpack+react
上一篇随笔讲述了新手入门入门前端 里面提到的第四阶段跟上当前前端的发展需要入门一个框架和自动化工具,当时推荐的是webpack+react 今天正好有空,也把自己入门webpack + react 的 ...
- webpack+react+redux+es6开发模式---续
一.前言 之前介绍了webpack+react+redux+es6开发模式 ,这个项目对于一个独立的功能节点来说是没有问题的.假如伴随着源源不断的需求,前段项目会涌现出更多的功能节点,需要独立部署运行 ...
- Webpack+React项目入门——入门及配置Webpack
一.入门Webpack 参考文章:<入门Webpack,看这篇就够了> 耐心看完这篇非常有帮助 二.React+Webpack环境配置 参考文章:<webpack+react项目初体 ...
- webpack react 单独打包 CSS
webpack react 单独打包 CSS webpack require css的方法,默认会把css 打入到js文件中,加载顺序有问题,如果需要打出独立的css文件 操作步骤: step1: 安 ...
- 最小白的webpack+react环境搭建
本文也同步发表在我的公众号“我的天空” 从零开始,用最少的配置.最少的代码.最少的依赖来搭建一个最简单的webpack+react环境. 最近在玩webpack+react+移动端,那么第一步自然是搭 ...
- 搭建 webpack + react 框架爬坑之路
由于工程实践需要搭一个 webpack + react 框架,本人刚开始学,就照b站上的react黑马视频做,爬过无数个坑...希望读者能引以为戒.我的是macos系统 https://www.bil ...
随机推荐
- 1082. Read Number in Chinese (25)-字符串处理
题意就是给出9位以内的数字,按照汉子的读法读出来. 读法请看下方的几个例子: 5 0505 0505 伍亿零伍佰零伍万零伍佰零伍 5 5050 5050 伍亿伍仟零伍拾万伍仟零伍拾 (原本我以为这个 ...
- Alpha版本项目展示得分
团队名称 得分 newbe 80 C705 100 ourteam 60 sevens 50 sixsix 190 dxteam 75 hots 200 Echo 90
- Linux shell(1)
Linux的Shell种类众多,常见的有:Bourne Shell(/usr/bin/sh或/bin/sh).Bourne Again Shell(/bin/bash).C Shell(/usr/bi ...
- java 封装,继承,多态基础
什么是封装? 1,对象数据和在.操作该对象的指令都是对象自身的一部分,能够实现尽可能对外部隐藏数据. 2,实际项目开发中,使用封装最多的就是实体类. 什么是继承? 1,继承是面向对象程序设计能提高效率 ...
- 平时在PHP编码时有没有注意到这些问题
编出一手好代码,这个是需要你在平时开发中日积月累的,平时如果你有注意到以下的那些代码的编码,那么祝贺你,你在技能提升这方面已经垫下了一些基础,编写出一手好代码,说白了就是你特么注意到性能这块的问题,代 ...
- 2013成都网赛1003 hdu 4730 We Love MOE Girls
题意:有一个字符串,若以"desu"结尾,则将末尾的"desu"替换为"nanodesu",否则在字符串末尾加上"nanodesu ...
- 【bzoj3881】[Coci2015]Divljak AC自动机+树链的并+DFS序+树状数组
题目描述 Alice有n个字符串S_1,S_2...S_n,Bob有一个字符串集合T,一开始集合是空的. 接下来会发生q个操作,操作有两种形式: “1 P”,Bob往自己的集合里添加了一个字符串P. ...
- 【刷题】BZOJ 2287 【POJ Challenge】消失之物
Description ftiasch 有 N 个物品, 体积分别是 W1, W2, ..., WN. 由于她的疏忽, 第 i 个物品丢失了. "要使用剩下的 N - 1 物品装满容积为 x ...
- 学习Spring Boot:(十一) 自定义装配参数
前言 SpringMVC 中 Controller 中方法的参数非常灵活,得益于它的强大自动装配,这次将根据上次遗留下的问题,将研究下装配参数. 正文 SpringMVC中使用了两个接口来处理参数: ...
- 解决360WiFi有时候手机连接不上
有可能是无线网卡的问题: 右击“计算机”->选择“管理”->“设备管理器”->网络适配器->选择“Broadcom 802.11n 网络适配器”,或者你实在不知道哪个是无线网 ...