Edited at

react-dndがステージ環境でレンダリングされなかった。


TL;DR

結果としてバージョン下げたらなおった。


起こったこと

react-dndを用いて、ドラッグ&ドロップを使ったreactのspaを作っていた

開発環境ではちゃんとレンダリングされる。ドラッグ&ドロップもちゃんとできる。

でも、ステージ環境にあげると画面が真っ白になり、何も表示されない。

verは当時(2019 3/22)での最新のものを使っていた。


  • react 16.8.4

  • react-dnd 7.3.2

  • react-dnd-html5-backend 7.2.0

環境としては開発環境はwebpack-dev-server、ステージ環境はwebpackでバンドルしたファイルをs3にあげてcloudFrontでキャッシュしているよくある構成。


react-dndの仕様

react-dndではドラッグする対象DragSourceとドロップする対象DropTargetのコンポーネントを定義し、そのコンポーネントよりも上位のコンポーネントDragDropContextか、DragDropContextProviderのどちらかを差し込まないといけない。(DragDropContext、DragDropContextProviderの両方使うとCannot have two HTML5 backends at the same timeというエラーがでる)

この上位のコンポーネントというのは上位であればどこでもいいが、アプリケーションのルートのコンポーネントに差し込んでいる例が多かった。

一応、readt-dndで画面のレンダリングがされないというissueは存在するが、DragDropContext、DragDropContextProviderをそもそも利用していないことが原因でレンダリングされていなかったというオチ。

https://github.com/react-dnd/react-dnd/issues/1132

今回の事象はDragDropContext、DragDropContextProviderは利用しているにも関わらず、画面がレンダリングされないという事象だったので、あまりissueは役に立たなかった。(そもそも開発環境だと表示されている)


遭遇したエラー

ローカルの開発環境だとDragDropContext、DragDropContextProviderのどちらを使ってもちゃんと画面表示される。

でもステージ環境だとDragDropContextProviderを使っているときはUncaught Invariant Violation: Hooks can only be called inside the body of a function component.というエラーが出て画面が真っ白。

↓最新のDragDropContextProviderはhooksを使っているみたいで、ここで死んでた

スクリーンショット 2019-03-22 15.40.58.png

DragDropContextを使うと、そもそもエラーも何もでず、画面が真っ白。


対処

react-dnd、react-dnd-html5-backendのverをちょっとずつ下げていってつど確認していった。

v4まで下げたら、ちゃんとステージ環境でもちゃんと動くようになった。

"react-dnd": "^4.0.0",

"react-dnd-html5-backend": "^4.0.0",

react-dndは直近でガンガンverが上がっているので、v4とかでも2018年のもの

https://github.com/react-dnd/react-dnd/releases


最後に

なんで治ったのかよくわからずじまいですが、結構ハマったので誰かの役に立てば、、