[分享] 关于 TypeError: o is not a constructor

[Tinhone]

这个问题是因自动更新了组件简化评论区但没有更新脚本本体引起的。

这次更新中的新代码

const { ShadowDomStyles } = await import('@/core/shadow-dom')
const v3Styles = await import('./comments-v3.scss').then(m => m.default)
const shadowDom = new ShadowDomStyles()
shadowDom.addStyle(v3Styles)

编译产物中对应的代码

const {
  ShadowDomStyles: o
}
= await Promise.resolve().then(i.t.bind(i, 488, 23)),
m = await Promise.resolve().then(i.t.bind(i, 62, 23)).then((n=>n.default));
(new o).addStyle(m)

因为 core/shadow-dom API 在旧版本脚本本体中不存在（o === undefined），所以显然会报错 TypeError: o is not a constructor。

不知道怎么回事报错堆栈定位不到关键代码，挺奇怪的。

报错堆栈

Bilibili Evolved TypeError: o is not a constructor
    entry 404 line 9 > injectedScript line 197 > Function line 4 > eval:9
    entry Bilibili-Evolved-Preview.user.js:11886
    entry Bilibili-Evolved-Preview.user.js:12987
    a Bilibili-Evolved-Preview.user.js:6174
    h Bilibili-Evolved-Preview.user.js:6204
    a Bilibili-Evolved-Preview.user.js:6243
    promise callback*a Bilibili-Evolved-Preview.user.js:6243
    F Bilibili-Evolved-Preview.user.js:6259
    r Bilibili-Evolved-Preview.user.js:12608
    r Bilibili-Evolved-Preview.user.js:12608
    r Bilibili-Evolved-Preview.user.js:12607
    F Bilibili-Evolved-Preview.user.js:6259
    F Bilibili-Evolved-Preview.user.js:6258
    async*window["__f__lzwc5452.ll"]/ 404:83
    set 404:91
     Bilibili-Evolved-Preview.user.js:1
    wt 404:9
    f 404:77
    l 404:79
    send 404:80
    Wn 404:17
    send 404:79
     404:83
Bilibili-Evolved-Preview.user.js:16751
    b Bilibili-Evolved-Preview.user.js:16751
    window["__f__lzwc5452.ll"]/ 404:83
    set 404:91
     Bilibili-Evolved-Preview.user.js:1
    wt 404:9
    f 404:77
    l 404:79
    send 404:80
    Wn 404:17
    send 404:79
     404:83

还好不是浏览器兼容性问题

[the1812]

真正的问题应该在于自动更新有 bug, 组件版本大于本体时不应该更新
目前所有产物都会注明要求的版本, 来避免这种情况, 但是确实遇到过有些人仍然装到了高版本组件的问题

[Tinhone]

感觉可以在组件编译产物或者 defineComponentMetadata 里加个默认为 true 的说明是否是破坏性变更的键，但不知道好不好做。这样的话在组件更新没涉及本体的时候，手动写或者自动加一下就可以提早更新了 🤔

对了，上面提到的异常看起来还会阻断 components block time 和 components resolve time 的日志输出，也许可以在哪里加一个错误处理？

[Tinhone]

原来有时候会安装高版本组件不是预期情况啊 ( ﾟ∀。)

[the1812]

调试了下这个检测逻辑也没发现有啥问题, 就加了个 log, 更新时可以留意一下