webpack react 錯誤整理

標籤：開啟   plugin   app   about   develop   技術   amp   pac   tar   

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 錯誤整理