Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

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

最後に

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

pokotyan
admin-guild
「Webサービスの運営に必要なあらゆる知見」を共有できる場として作られた、運営者のためのコミュニティです。
https://admin-guild.slack.com
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away