Mon application fonctionne bien sur mon environnement local, mais lorsque je déploie sur le serveur, la console affiche l'erreur : « Violation invariante : recherche de contexte de glisser-déposer attendue » lors du déploiement sur le serveur.
Je n'ai absolument aucune idée de ce qui ne va pas. Pourriez-vous m'aider à me donner des conseils sur ce qui peut être une cause profonde?
Ma version de nœud local est 8.11.3. Et j'utilise 8.11.3 sur le serveur pour construire et un serveur express pour servir les fichiers statiques dans l'environnement de nœud cloud par défaut (v6.7.0).
J'utilise:
"react-dnd": "^9.0.1"
"react-dnd-html5-backend": "^9.0.0"
"react-dnd-touch-backend": "^9.0.2"
J'ai mis à niveau mes packages vers la dernière version et l'erreur se produit dans mon environnement local.
C'est parce que j'ai un ^ et que j'utilise fil en local mais npm dans le cloud pour construire, j'ai donc une version de package différente en local et en dev.
Et quand j'utilise 9.3.3 et 9.3.2, j'ai la même erreur : 'Invariant Violation: Expected drag drop context find. J'ai perdu le contexte.
Et 9.2.1 c'est bien.
+1 je reçois ça aussi
L'environnement ressemble à :
"react": "^16.8.6",
"react-dnd": "^9.3.4",
"react-dnd-html5-backend": "^9.3.4",
"react-dom": "^16.8.6",
Cela signifie probablement que vous avez DndProvider
enveloppant un composant trop bas dans votre arborescence de composants.
Avez-vous résolu cela ? J'ai eu le même problème et il s'est avéré que plusieurs bibliothèques react-dnd de différentes versions étaient regroupées dans mon application. Espérons que cela aide quelqu'un.
Je suis également confronté au même problème. Quelqu'un a-t-il trouvé la solution, merci de la partager.
Je n'exportais pas le <DndProvider />
. Une fois que j'ai fait cela, tout a bien fonctionné.
vous devez envelopper votre composant de fichier de test comme ceci :
<DndProvider backend={HTML5Backend}>
<Component />
</DndProvider>
vous devez envelopper votre composant de fichier de test comme ceci :
<DndProvider backend={HTML5Backend}> <Component /> </DndProvider>
Je souhaite vraiment que ces informations soient disponibles sur cette page http://react-dnd.github.io/react-dnd/docs/overview.
Sinon, les utilisateurs doivent faire défiler toute une implémentation de l'échiquier pour le trouver.
J'obtiens aussi l'erreur Expected drag drop context
. Pour moi, cela ne fonctionne que si le DndProvider
est le nœud parent immédiat du composant qui utilise useDrag
. Il fonctionne cependant avec une ancienne version (9.0.0). Cependant, l'indice
Cela devrait être monté près du haut de notre application (ce qui signifie le
DndProvider
)
est définitivement faux.
@markusmauch
Merci - cela m'a épargné un énorme mal de tête. Oui, la documentation n'est certainement pas exacte ici.
Commentaire le plus utile
vous devez envelopper votre composant de fichier de test comme ceci :
<DndProvider backend={HTML5Backend}> <Component /> </DndProvider>