在 Firefox 浏览器中与 Dark Reader 插件不兼容

scris commented 1 month ago

描述bug

使用 Chrome 可以正常使用页面，但使用 Firefox 时，如果启用了非常常见的浏览器插件 Dark Reader，则对于本地和编译后情况，均出现这一报错，并无法完成加载。

DOMException: CSSStyleSheet.cssRules getter: Not allowed to access cross-origin stylesheet
    getPatchStyleElements shadow.ts:345
    patchCssRules sandbox.ts:458
    _callee$ sandbox.ts:233
    Async Babel
    node_modules chunk-KDGVXTTQ.js:149
    node_modules chunk-KDGVXTTQ.js:90
    Babel 8
    active sandbox.ts:237
    _callee2$ index.ts:274
    Async Babel
    node_modules chunk-KDGVXTTQ.js:149
    node_modules chunk-KDGVXTTQ.js:90
    Babel 8
    startApp index.ts:185
    _callee$ index.js:50
    tryCatch index.js:2
    makeInvokeMethod index.js:2
    defineIteratorMethods index.js:2
    asyncGeneratorStep index.js:2
    _next index.js:2
    _asyncToGenerator index.js:2
    _asyncToGenerator index.js:2
    startApp2 index.js:75
    promise callback*execStartApp index.js:79
    mounted index.js:38

如何复现

给出详细的复现步骤

使用任意方式创建一个 wujie 的微前端组件，下文是其中一个实例，但不是必要的方式
```
<WujieVue
:alive="true"
:url="prod ? '/micro/***/' : 'http://localhost:****/'"
/>
```
在 Chrome 浏览器中将其调通
在关闭 Dark Reader 的 Firefox 浏览器中显示正常
下载并启用 Dark Reader 插件，并刷新页面

我理解浏览器插件兼容性可能不是一个必须由框架来解决的事情，但普通用户大概率想不到是插件的问题，只会觉得是网站写的有问题，所以还请您方看一下（类似的，Ant Design 曾经解决过仅 Dark Reader 或 Stylus 使用者会出现的问题，详见 https://github.com/ant-design/ant-design/issues/49524 ）。谢谢！

错误截图

scris commented 1 month ago

应该是只要是 firefox + dark reader + wujie，无论具体怎么写的，都会导致用不了，官网示例也如此：https://wujie-micro.github.io/doc/wujie/

scris commented 3 weeks ago

发现了和 dark reader 的另一个不兼容性，且这个问题同时对 chrome 和 firefox 成立：开启 dark reader 后，子应用中获取 documentElement 会从 <html ...>（正确）变为（错误），从而导致弹窗位移等情况

Tencent / wujie

在 Firefox 浏览器中与 Dark Reader 插件不兼容 #912