React-dnd: Violação Invariante Não Capturada: Não é possível chamar o foco enquanto não estiver arrastando. erro no Chrome 77.0 ao usar iframes

Vendo os mesmos problemas em nosso aplicativo, também temos nosso código DND dentro de um iframe e está completamente quebrado para usuários com a atualização mais recente do chrome.

Erros:

Isso também está afetando algumas das funcionalidades de arrastar e soltar nos vários aplicativos de edição do HubSpot (que usam react-dnd dentro de um iframe). Ainda cavando na extensão do problema.

E eu repliquei o problema demonstrado pelo exemplo codesandbox no Chrome 77.0.3865.75 no Windows 10.

Não tive a chance de compará-lo com o back-end HTML5 mais recente no react-dnd master, mas implantamos uma correção temporária e hacky em nosso back-end HTML5 personalizado:

Curiosamente, esse atraso setTimeout handleTopDragEndCapture funciona mais de 95% das vezes. Porque vimos uma falha ocasional em que o erro Invariant Violation ainda acontece, provavelmente porque o atraso não foi longo o suficiente. No entanto, isso pelo menos melhorou a situação para nós, e podemos olhar para um hack mais robusto se/quando necessário.

+1

Recebo este mesmo erro no instantâneo Vivaldi 2.8.1664.30 (Official Build) (64 bits) em todos os componentes, não apenas aqueles em um iframe, enquanto o Chrome parece funcionar perfeitamente. Eu tentei fazer a mudança que @timmfin sugeriu, mas não fez nada por mim

Este erro é bastante devastador para nós. Temos vários aplicativos que quebraram completamente quando os usuários atualizaram o Chrome.

A solução alternativa do @timmfin está funcionando para nós, obrigado!

Eu estive brincando com isso por algumas horas hoje à noite no ramo mestre. Não está mais lançando uma exceção, mas não consigo soltar nenhum item. A solução alternativa setTimeout parece corrigi-lo.

Parece-me que temos um handleTopDragEndCapture seguido por um handleDrop e depois um handleTopDrop

Se chamarmos endDrag() dentro de handleTopDragEndCapture, os eventos drop não serão disparados em um IFRAME. Que estranho.

Curiosamente, quando não estou em um IFRAME, só vejo os eventos dragend quando um arrasto é cancelado não imediatamente antes de um lançamento bem-sucedido. Essa parece ser a diferença.

Aqui vamos nós, acho que este é o problema: https://bugs.chromium.org/p/chromium/issues/detail?id=1005747

Alguém já portou a solução alternativa para versões mais antigas desta biblioteca? Como 2.6.0 :sweat_smile:

Como solução alternativa, apenas para uso em desktop, tenho usado https://github.com/zyzo/react-dnd-mouse-backend como uma alternativa ao back-end HTML5. Parece funcionar bem para mim

Apenas FYI, estou vendo isso no Linux agora também.

Como solução alternativa, apenas para uso em desktop, tenho usado https://github.com/zyzo/react-dnd-mouse-backend como uma alternativa ao back-end HTML5. Parece funcionar bem para mim

Eu também tentei essa correção, mas o back-end do mouse é muito problemático no FireFox.

@ Cristy94 Parece que ele excluiu o comentário, mas https://www.npmjs.com/package/@vvitto/html5 -backend-chrome-dnd-fix foi postado antes. Não testei, mas pode funcionar?

@TheConfuZzledDude @Cristy94 funciona para mim, mas você deve verificar a versão do seu back-end. Funciona bem em 2.5.4

@TheConfuZzledDude @Cristy94 funciona para mim, mas você deve verificar a versão do seu back-end. Funciona bem em 2.5.4

O que funciona? O back-end do mouse não possui a versão 2.5.4 https://github.com/zyzo/react-dnd-mouse-backend/releases e o back-end html5 não funciona no Windows 10 - Chrome 77, conforme mencionado no post original.

Alguém já portou a solução alternativa para versões mais antigas desta biblioteca? Curte 2.6.0 😅

sim, fizemos algumas adaptações da solução alternativa para o html5-backend 2.2.7 e funcionou bem o suficiente para colocar em produção.

Apenas FYI, estou vendo isso no Linux agora também.

O bug do Chromium reconheceu que o Linux tem o mesmo e será corrigido com a versão do Windows. O estado mais recente é o M78, que sai na versão beta em poucos dias, o M79 e o Canary já o têm. Eles ainda estão discutindo o patch do M77.

Não tive a chance de compará-lo com o back-end HTML5 mais recente no react-dnd master, mas implantamos uma correção temporária e hacky em nosso back-end HTML5 personalizado:

Curiosamente, o atraso setTimeout dos eventos é válido por mais de handleTopDragEndCapture 95% do tempo. Porque vemos falhas ocasionais Invariant Violation erros ainda ocorrem, provavelmente porque o atraso não é longo o suficiente. No entanto, isso pelo menos melhora a situação para nós, e podemos considerar técnicas mais robustas, se necessário.

Este problema ainda existe, como posso usá-lo para resolvê-lo, apresse-se!

Estamos usando react-dnd em um aplicativo da Web que está hospedado em outro aplicativo da Web usando um iframe de origem cruzada.

Percebemos que desde a última atualização do Chrome, todos os recursos de arrastar e soltar pararam de funcionar. Nosso aplicativo funciona bem em versões mais antigas do Chrome e outros navegadores.

Não temos certeza se este é o lead nesta biblioteca ou se é um problema no Chrome 77.0

reprodução

Vá para http://react-dnd.github.io/react-dnd/examples/dustbin/single-target (ou qualquer exemplo)

Etapas para reproduzir o comportamento:

O exemplo "inline" funciona bem:

No entanto, executando o mesmo código em uma tag JavaScript/TypeScript, portanto, em um iframe entre domínios (por exemplo, em um codeandbox incorporado), o evento drop não é acionado:

A execução dos exemplos também não funciona no editor CodeSandBox, que também usa a estrutura interna.

Em ambos os casos este erro aparece no console:

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)

Comportamento esperado <br i="27"/> Nenhuma exceção no console, evento drop gerado

Desktop (por favor, preencha as seguintes informações):

• Sistema operacional: Windows 10 (1903)
• Navegador Chrome
• Versão 77.0.3865.75 (compilação oficial) (64 bits)

Contexto adicional <br i="36"/> Fizemos algumas investigações e descobrimos que o Chrome aciona o evento dragEnd prematuramente no caso de um iframe quebrar a verificação invariável.

Também gostaria de poder corrigir isso o mais rápido possível, esse problema ocorre com o chrome versão 77

Isso também afeta algumas funcionalidades de arrastar e soltar dos vários aplicativos de edição do HubSpot (usando react-dnd em iframes). Até que ponto o problema ainda está sendo pesquisado em profundidade.

Eu repliquei o problema demonstrado pelo exemplo codeandbox no Chrome 77.0.3865.75 para Windows 10.

Como resolver, por favor responda, obrigado

Isso também está afetando algumas das funcionalidades de arrastar e soltar nos vários aplicativos de edição do HubSpot (que usam react-dnd dentro de um iframe). Ainda cavando na extensão do problema.

E eu repliquei o problema demonstrado pelo exemplo codesandbox no Chrome 77.0.3865.75 no Windows

Estamos usando react-dnd em um aplicativo da Web que está hospedado em outro aplicativo da Web usando um iframe de origem cruzada.

Percebemos que, desde a última atualização do Chrome, toda a funcionalidade de arrastar e soltar parou de funcionar. Nosso aplicativo está funcionando bem em versões mais antigas do Chrome e em outros navegadores.

Não temos certeza se isso está atingindo um caso extremo nesta biblioteca ou o problema está no Chrome 77.0

Reprodução

Vá para http://react-dnd.github.io/react-dnd/examples/dustbin/single-target (ou para qualquer um dos exemplos)

Etapas para reproduzir o comportamento:

O exemplo "inline" está funcionando bem:

No entanto, executando o mesmo código nas guias JavaScript/TypeScript, portanto, em um iframe de origem cruzada (por exemplo, no codeandbox incorporado), o evento drop não é acionado:

A execução do exemplo também não está funcionando no editor CodeSandBox, que também usa um inframe.

Em ambos os casos há este erro no console:

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)

Comportamento esperado
Sem exceções no console, o evento drop é acionado

Desktop (por favor, preencha as seguintes informações):

• SO: Windows 10 (1903)
• Navegador Chrome
• Versão 77.0.3865.75 (compilação oficial) (64 bits)

Contexto adicional
Fizemos algumas investigações e observamos que o Chrome dispara o evento dragEnd prematuramente no caso do iframe que interrompe as verificações invariáveis.

请问这个问题解决了吗？

A correção de bug original do Chrome foi mesclada com a próxima versão do patch M77. Eu não posso dizer quando ele realmente sairá, apenas que eu tenho acompanhado a página de bugs do cromo sobre isso de perto.

O bug estava no Chrome e corrigido na versão do Chrome: 77.0.3865.120

Chrome 78 está fora! Posso confirmar que o problema desaparece no Chrome 78 :-)

Isso também está afetando algumas das funcionalidades de arrastar e soltar nos vários aplicativos de edição do HubSpot (que usam react-dnd dentro de um iframe). Ainda cavando na extensão do problema.
E eu repliquei o problema demonstrado pelo exemplo codesandbox no Chrome 77.0.3865.75 no Windows

Estamos usando react-dnd em um aplicativo da Web que está hospedado em outro aplicativo da Web usando um iframe de origem cruzada.
Percebemos que, desde a última atualização do Chrome, toda a funcionalidade de arrastar e soltar parou de funcionar. Nosso aplicativo está funcionando bem em versões mais antigas do Chrome e em outros navegadores.
Não temos certeza se isso está atingindo um caso extremo nesta biblioteca ou o problema está no Chrome 77.0
Reprodução
Vá para http://react-dnd.github.io/react-dnd/examples/dustbin/single-target (ou para qualquer um dos exemplos)
Etapas para reproduzir o comportamento:
O exemplo "inline" está funcionando bem:

No entanto, executando o mesmo código nas guias JavaScript/TypeScript, portanto, em um iframe de origem cruzada (por exemplo, no codeandbox incorporado), o evento drop não é acionado:

A execução do exemplo também não está funcionando no editor CodeSandBox, que também usa um inframe.

Em ambos os casos há este erro no console:

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)

Comportamento esperado
Sem exceções no console, o evento drop é acionado
Desktop (por favor, preencha as seguintes informações):

• SO: Windows 10 (1903)
• Navegador Chrome
• Versão 77.0.3865.75 (compilação oficial) (64 bits)

Contexto adicional
Fizemos algumas investigações e observamos que o Chrome dispara o evento dragEnd prematuramente no caso do iframe que interrompe as verificações invariáveis.

请问这个问题解决了吗？

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