最新消息:VPS服务器又从fzhost.net换回Linode了,主题仍用朋友推荐的大前端D8

【已解决】Preact程序调试运行出错:Uncaught TypeError: Cannot read property ‘replace’ of undefined

Preact crifan 1112浏览 0评论

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

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
59 queries in 0.258 seconds, using 12.03MB memory