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