Preact项目,用wepack打包,期间修改了代码,结果报错:
Uncaught TypeError: Cannot read property ‘replace’ of undefined at strip (eval at <anonymous> (http://localhost:8080/uapp/bundle_b6693d860be1035ea22b.js:878:1), <anonymous>:83:12) at rank (eval at <anonymous> (http://localhost:8080/uapp/bundle_b6693d860be1035ea22b.js:878:1), <anonymous>:79:10) at pathRankSort (eval at <anonymous> (http://localhost:8080/uapp/bundle_b6693d860be1035ea22b.js:878:1), <anonymous>:70:13) at Array.sort (native) at Array.sort (eval at <anonymous> (http://localhost:8080/uapp/bundle_b6693d860be1035ea22b.js:3677:1), <anonymous>:21:15) at Router.getMatchingChildren (eval at <anonymous> (http://localhost:8080/uapp/bundle_b6693d860be1035ea22b.js:878:1), <anonymous>:304:27) at Router.render (eval at <anonymous> (http://localhost:8080/uapp/bundle_b6693d860be1035ea22b.js:878:1), <anonymous>:325:21) at renderComponent (eval at <anonymous> (http://localhost:8080/uapp/bundle_b6693d860be1035ea22b.js:747:1), <anonymous>:263:38) at setComponentProps (eval at <anonymous> (http://localhost:8080/uapp/bundle_b6693d860be1035ea22b.js:747:1), <anonymous>:244:103) at buildComponentFromVNode (eval at <anonymous> (http://localhost:8080/uapp/bundle_b6693d860be1035ea22b.js:747:1), <anonymous>:331:13) |
从:
export const ROUTE_PREFIX = { NONE : null, |
改为:
export const ROUTE_PREFIX = { NONE : "", |
问题依旧。
从:
import config from ‘../config’; export const ROUTE_PREFIX = { // NONE : null, NONE : "", MAIN : `${config.routePrefix}/`, |
改为:
// import config from ‘../config’; export const config = { routePrefix : "/uapp" }; export const ROUTE_PREFIX = { // NONE : null, NONE : "", MAIN : `${config.routePrefix}/`, |
问题依旧。
现在搞得不知道是哪里出错了。
Router.getMatchingChildren
好像是router路由去找匹配的路径,但是找不到
此处是连主页 /uapp/ 都匹配不到了。
然后去log:
代码:
alert(`${typeof(ROUTE_PREFIX.MAIN)},ROUTE_PREFIX.MAIN=${ROUTE_PREFIX.MAIN}`); |
输出:
string,ROUTE_PREFIX.MAIN=/uapp/ |
好像是对的,没问题啊
Uncaught TypeError: Cannot read property ‘replace’ of undefined
Uncaught TypeError: Cannot read property ‘replace’ of null · Issue #381 · webpack/webpack-dev-server
降级版本?
Chrome的tag问题?
那换用Safari去试试
结果问题依旧:
Router.getMatchingChildren
看来还是自己的代码哪里出问题了
不过Safari中可以点击跳转到,原始的可读的源码:
通过这种调试方式,一点点去看代码
然后代码改为:
render() { alert("App render"); const prop = this.props; //TODO: fix first load not load main page content // alert(`${typeof(ROUTE_PREFIX.MAIN)},ROUTE_PREFIX.MAIN=${ROUTE_PREFIX.MAIN}`); console.log(`${typeof(ROUTE_PREFIX.MAIN)},ROUTE_PREFIX.MAIN=${ROUTE_PREFIX.MAIN}`); // <Main path={ROUTE_PREFIX.MAIN} /> // <Profile path={ROUTE_PREFIX.PROFILE} /> // <Functions path={ROUTE_PREFIX.Functions} /> // <EstrusManagement path={ROUTE_PREFIX.ESTRUS_MANAGEMENT} /> // <Graphs path={ROUTE_PREFIX.GRAPHS} /> return ( <div id="app"> <Loading show={prop.globalLoadingShown}/> <Header curUrl={this.state.curUrl} goBackFunc={this.goBackFunc} fetchFunc={this.props.fetch}/> <div class="container"> <Router onChange={this.handleRoute} history={browserHistory}> <Main path="/uapp/" /> {/* <Main path="/" /> */} <Profile path="/profile"/> <Functions path="/function" /> <Graphs path="/graph" /> |
然后就可以加载页面了:
(但是,当然,跳转到别的页面还会出错:)
最后找到原因了:
【总结】
不过:
(1)开始以为是:
App.js中的路由配置,和
store.js中的路由配置不一致呢,后来发现是一致的。
(2)以为是:
只不过,对于Preact-router来说,对于代码:
render() { console.log(`${typeof(ROUTE_PREFIX.MAIN)},ROUTE_PREFIX.MAIN=${ROUTE_PREFIX.MAIN},ROUTE_PREFIX.PROFILE=${ROUTE_PREFIX.PROFILE}`); <div class="container"> <Router onChange={this.handleRoute} history={browserHistory}> <Main path={ROUTE_PREFIX.MAIN} /> <Profile path={ROUTE_PREFIX.PROFILE} /> <Functions path={ROUTE_PREFIX.FUCTIONS} /> <Graphs path={ROUTE_PREFIX.GRAPHS} /> |
虽然打印出了:
ROUTE_PREFIX.MAIN类型是string,且是希望的 /uapp/
但是不能写成这样,要写成:
<Main path={`${ROUTE_PREFIX.MAIN}`} /> <Profile path={`${ROUTE_PREFIX.PROFILE}`} /> <Functions path={`${ROUTE_PREFIX.FUCTIONS}`} /> <Graphs path={`${ROUTE_PREFIX.GRAPHS}`} /> |
(3)最后的最后发现:
其实是:
此处有个笔误:
<Functions path={ROUTE_PREFIX.Functions}
中的
ROUTE_PREFIX.Functions
应该是:
ROUTE_PREFIX.FUCTIONS
-》导致ROUTE_PREFIX中找不到Functions
-》所以返回null
-》所以最后传递到Router.getMatchingChildren等等函数中,是null,无法匹配到对应的路由。
-》所以,最终解决办法是:
把笔误ROUTE_PREFIX.Functions改为:ROUTE_PREFIX.FUCTIONS
即可:
【心得】
1.preact-router的提示不够智能和清楚
抛开自己的低级错误,笔误来说:
对于此处的Preact-Router来说,传递进去一堆的router,但是由于其中一个找不到,就报:
Uncaught TypeError: Cannot read property ‘replace’ of undefined
的错误,但是却无法定位具体是哪个错误。
此等事情,也算是错误提示做的很不好啊。
才导致花了如此长的时间去调试。
2.Safari貌似对于js的支持更好?
Chrome中点击出错,虽然可以跳到源码处,但是是压缩后的,所以没意义,没法看到压缩前的源码
而Safari此处可以点击对应代码,看到(通过map文件解析?后的)源码,从而便于找到问题原因
不过此处之所以Chrome没有加载压缩前的源码,可能和之前(好像是又一次)提示我是否加载解析后的源码,结果我选择了不加载?不解析?
【待解决】如何让Chrome浏览器加载反解压出来的js的源码
转载请注明:在路上 » 【已解决】Preact程序调试运行出错:Uncaught TypeError: Cannot read property ‘replace’ of undefined