React-dnd: 未捕获的不变违规：不拖动时无法调用悬停。 使用 iframe 时 Chrome 77.0 中的错误

在我们的应用程序中看到相同的问题，我们还在 iframe 中拥有我们的免打扰代码，并且对于具有最新 chrome 更新的用户来说，它完全被破坏了。

错误：

这也影响了 HubSpot 的各种编辑器应用程序中的一些拖放功能（在 iframe 中使用 react-dnd）。 仍在深入研究问题的严重程度。

我已经复制了 Windows 10 上 Chrome 77.0.3865.75 中的代码框示例演示的问题。

我没有机会将它与 react-dnd master 上最新的 HTML5 后端进行比较，但我们已经为我们的自定义 HTML5 后端部署了一个临时的、hacky 修复：

有趣的是， handleTopDragEndCapture事件的setTimeout延迟在 95% 以上的时间内有效。 因为我们已经看到偶尔出现Invariant Violation错误仍然发生的故障，可能是因为延迟时间不够长。 但是，这至少改善了我们的情况，如果/需要时，我们可以查看更强大的 hack。

+1

我在每个组件的 Vivaldi 2.8.1664.30（官方构建）快照（64 位）中都遇到了同样的错误，而不仅仅是 iframe 中的那些，而 Chrome 似乎工作得很好。 我尝试进行@timmfin建议的更改，但对我没有任何帮助

这个错误对我们来说是毁灭性的。 我们有多个应用程序在用户更新 Chrome 时完全崩溃。

@timmfin的解决方法对我们有用，谢谢！

今晚我在主分支上玩了几个小时。 它不再抛出异常，但我不能丢弃任何物品。 setTimeout 解决方法似乎可以解决它。

在我看来，我们得到了一个 handleTopDragEndCapture，然后是一个 handleDrop，然后是一个 handleTopDrop

如果我们在 handleTopDragEndCapture 中调用 endDrag()，则放置事件根本不会在 IFRAME 中触发。 多么奇怪。

有趣的是，当不在 IFRAME 中时，我只在成功放置之前取消拖动时才看到 dragend 事件。 这似乎就是区别。

我们开始吧，我认为这是问题所在： https ://bugs.chromium.org/p/chromium/issues/detail?id=1005747

有没有人将解决方法移植到这个库的旧版本？ 喜欢 2.6.0 :sweat_smile:

作为一种解决方法，仅用于桌面使用，我一直在使用https://github.com/zyzo/react-dnd-mouse-backend作为 HTML5 后端的替代方案。 对我来说似乎很好用

仅供参考，我现在也在 Linux 上看到了这个。

作为一种解决方法，仅用于桌面使用，我一直在使用https://github.com/zyzo/react-dnd-mouse-backend作为 HTML5 后端的替代方案。 对我来说似乎很好用

我也试过这个修复，但鼠标后端在 FireFox 中确实有问题。

@Cristy94似乎他删除了评论，但之前发布了https://www.npmjs.com/package/@vvitto/html5 -backend-chrome-dnd-fix。 我还没有测试过，但它可能有效吗？

@TheConfuZzledDude @Cristy94它对我有用，但您应该检查后端的版本。 它在 2.5.4 上运行良好

@TheConfuZzledDude @Cristy94它对我有用，但您应该检查后端的版本。 它在 2.5.4 上运行良好

什么有效？ 鼠标后端没有版本 2.5.4 https://github.com/zyzo/react-dnd-mouse-backend/releases并且 html5 后端在 Windows 10 - Chrome 77 上不起作用，如原始帖子中所述。

有没有人将解决方法移植到这个库的旧版本？ 喜欢 2.6.0 😅

是的，我们对 html5-backend 2.2.7 的解决方法做了一些调整，它运行良好，可以投入生产。

仅供参考，我现在也在 Linux 上看到了这个。

Chromium 的 bug 承认 Linux 也有，Windows 版本会修复它。 最新状态是 M78 将在几天后推出 beta 版，M79 和 Canary 已经有了。 他们仍在讨论修补 M77。

我还没有机会将它与react-dnd master上的最新HTML5后端进行比较，但是我们已经对自定义HTML5后端部署了一个临时的，hacky的修复程序：

有趣的是，事件的setTimeout延迟在handleTopDragEndCapture95％以上的时间内有效。因为我们看到偶尔的故障Invariant Violation仍然会发生错误，可能是因为延迟时间不够长。但是，这至少为我们改善了情况，如果需要的话，我们可以考虑采用更强大的技术。

这个问题现在仍然存在，我怎么样使用才能够解决呢，急急急！

我们在一个Web应用程序中使用react-dnd，该Web应用程序使用跨源iframe托管在另一个Web应用程序中。

我们已经注意到，自从上次Chrome升级以来，所有拖放功能均停止工作。我们的应用程序在较旧的Chrome版本和其他浏览器中均可正常运行。

我们不确定这是否在该库中处于领先地位，还是在Chrome 77.0中出现问题

再生产

转到http://react-dnd.github.io/react-dnd/examples/dustbin/single-target（或任何示例）

重现行为的步骤：

“内联”示例运行良好：

但是，在JavaScript / TypeScript标签中运行相同的代码，因此在跨域iframe中（例如，在嵌入式codeandbox中），不会触发drop事件：

运行示例也无法在CodeSandBox编辑器中使用，后者也使用内置框架。

在这两种情况下，控制台中都会出现此错误：

browser.js:38 Uncaught Invariant Violation: Cannot call hover while not dragging.
    at invariant (https://hmq56.csb.app/node_modules/invariant/browser.js:38:15)
    at checkInvariants (https://hmq56.csb.app/node_modules/dnd-core/dist/esm/actions/dragDrop/hover.js:45:29)
    at DragDropManagerImpl.hover (https://hmq56.csb.app/node_modules/dnd-core/dist/esm/actions/dragDrop/hover.js:25:5)
    at Object.eval [as hover] (https://hmq56.csb.app/node_modules/dnd-core/dist/esm/DragDropManagerImpl.js:132:38)
    at HTML5Backend.handleTopDrop (https://hmq56.csb.app/node_modules/react-dnd-html5-backend/dist/esm/HTML5Backend.js:418:21)

预期行为
控制台中无异常，引发了drop事件

桌面（请完成以下信息）：

• 作业系统：Windows 10（1903）
• 浏览器Chrome
• 版本77.0.3865.75（官方内部版本）（64位）

附加上下文
我们进行了一些调查，我们发现在iframe打破不变检查的情况下，Chrome会过早触发dragEnd事件。

我也希望能够尽快解决这个问题，chrome版本77出现这个问题

这也影响到HubSpot的各种编辑器应用程序（在iframe中使用react-dnd）的某些拖放功能。仍在深入研究问题的程度。

我已经复制了Windows 10的Chrome 77.0.3865.75中的codeandbox示例所演示的问题。

怎么解决的，麻烦回复一下，谢谢

这也影响了 HubSpot 的各种编辑器应用程序中的一些拖放功能（在 iframe 中使用 react-dnd）。 仍在深入研究问题的严重程度。

我已经复制了 Windows 上 Chrome 77.0.3865.75 中的代码框示例所展示的问题

我们在一个 Web 应用程序中使用 react-dnd，该 Web 应用程序使用跨域 iframe 托管在另一个 Web 应用程序中。

我们注意到，自上次 Chrome 升级以来，所有拖放功能都停止了工作。 我们的应用在旧版 Chrome 和其他浏览器中运行良好。

我们不确定这是在这个库中遇到边缘情况还是在 Chrome 77.0 中出现问题

再生产

转到http://react-dnd.github.io/react-dnd/examples/dustbin/single-target （或任何示例）

重现行为的步骤：

“内联”示例运行良好：

但是在 JavaScript/TypeScript 选项卡中运行相同的代码，因此在跨域 iframe 中（例如，在嵌入式代码框中）不会触发 drop 事件：

在也使用内框的 CodeSandBox 编辑器中运行该示例也不起作用。

在这两种情况下，控制台中都会出现此错误：

browser.js:38 Uncaught Invariant Violation: Cannot call hover while not dragging.
    at invariant (https://hmq56.csb.app/node_modules/invariant/browser.js:38:15)
    at checkInvariants (https://hmq56.csb.app/node_modules/dnd-core/dist/esm/actions/dragDrop/hover.js:45:29)
    at DragDropManagerImpl.hover (https://hmq56.csb.app/node_modules/dnd-core/dist/esm/actions/dragDrop/hover.js:25:5)
    at Object.eval [as hover] (https://hmq56.csb.app/node_modules/dnd-core/dist/esm/DragDropManagerImpl.js:132:38)
    at HTML5Backend.handleTopDrop (https://hmq56.csb.app/node_modules/react-dnd-html5-backend/dist/esm/HTML5Backend.js:418:21)

预期行为
控制台无异常，触发 drop 事件

桌面（请填写以下信息）：

• 操作系统：Windows 10 (1903)
• 浏览器 Chrome
• 版本 77.0.3865.75（官方版本）（64 位）

附加上下文
我们进行了一些调查，我们观察到在 iframe 破坏不变检查的情况下，Chrome 会过早触发 dragEnd 事件。

请问这个问题解决了吗？

最初的 Chrome 错误修复已合并到即将发布的 M77 补丁版本中。 我不能说它什么时候会真正出来，只是我一直在密切关注铬错误页面。

该错误在 Chrome 中并在 Chrome 版本中修复：77.0.3865.120

铬 78 出来了！ 我可以确认问题在 Chrome 78 中消失了 :-)

这也影响了 HubSpot 的各种编辑器应用程序中的一些拖放功能（在 iframe 中使用 react-dnd）。 仍在深入研究问题的严重程度。
我已经复制了 Windows 上 Chrome 77.0.3865.75 中的代码框示例所展示的问题

我们在一个 Web 应用程序中使用 react-dnd，该 Web 应用程序使用跨域 iframe 托管在另一个 Web 应用程序中。
我们注意到，自上次 Chrome 升级以来，所有拖放功能都停止了工作。 我们的应用在旧版 Chrome 和其他浏览器中运行良好。
我们不确定这是在这个库中遇到边缘情况还是在 Chrome 77.0 中出现问题
再生产
转到 http://react-dnd.github.io/react-dnd/examples/dustbin/single-target （或任何示例）
重现行为的步骤：
“内联”示例运行良好：

但是在 JavaScript/TypeScript 选项卡中运行相同的代码，因此在跨域 iframe 中（例如，在嵌入式代码框中）不会触发 drop 事件：

在也使用内框的 CodeSandBox 编辑器中运行该示例也不起作用。

在这两种情况下，控制台中都会出现此错误：

browser.js:38 Uncaught Invariant Violation: Cannot call hover while not dragging.
    at invariant (https://hmq56.csb.app/node_modules/invariant/browser.js:38:15)
    at checkInvariants (https://hmq56.csb.app/node_modules/dnd-core/dist/esm/actions/dragDrop/hover.js:45:29)
    at DragDropManagerImpl.hover (https://hmq56.csb.app/node_modules/dnd-core/dist/esm/actions/dragDrop/hover.js:25:5)
    at Object.eval [as hover] (https://hmq56.csb.app/node_modules/dnd-core/dist/esm/DragDropManagerImpl.js:132:38)
    at HTML5Backend.handleTopDrop (https://hmq56.csb.app/node_modules/react-dnd-html5-backend/dist/esm/HTML5Backend.js:418:21)

预期行为
控制台无异常，触发 drop 事件
桌面（请填写以下信息）：

• 操作系统：Windows 10 (1903)
• 浏览器 Chrome
• 版本 77.0.3865.75（官方版本）（64 位）

附加上下文
我们进行了一些调查，我们观察到在 iframe 破坏不变检查的情况下，Chrome 会过早触发 dragEnd 事件。

请问这个问题解决了吗？

你用中文提问是没有人回答你的