react-dndで画面全体がレンダリングされなくなる
react-dndを使ってドラッグアンドドロップを利用したreact,reduxのspaを作成しています。
ローカルはwebpack-dev-serverを立ち上げ開発しているのですが、開発環境では問題なく、react-dndを利用できています。
しかし、ステージ環境では画面が一切表示されない(真っ白)という状態になっています。
ステージ環境はwebpackでビルドしたファイルをs3にあげ、cloudFrontでキャッシュしているというよくある構成です。
こちらの環境はreact-dndを導入する前までは正常に動作していました。(ちゃんと画面表示される)
ルートのファイルは以下のような内容です。
DragDropContextProviderを一番外側に使っています。
import 'reflect-metadata';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { ConnectedRouter } from 'connected-react-router';
import { AppContainer } from 'react-hot-loader';
import HTML5Backend from 'react-dnd-html5-backend';
import { DragDropContextProvider } from 'react-dnd';
import App from './App';
import store, { history } from './js/store';
const render = () => {
ReactDOM.render(
<DragDropContextProvider backend={HTML5Backend}>
<Provider store={store}>
<ConnectedRouter history={history}>
<AppContainer>
<App />
</AppContainer>
</ConnectedRouter>
</Provider>
</DragDropContextProvider>,
document.getElementById('app')
);
};
render();
if (module.hot) {
module.hot.accept('./js/router/Routes', () => {
render();
});
}
react-dev-toolで見てみるとDragDropContextProviderがUnknownとなっている状態です。
ローカルの開発環境だとUnknownではなく、Componentとなっています。
issueが立っていないか確認もしましたが、それっぽいものはありましたが、解決はしておらずこちらのissueでも質問を投げかけている状態です。
https://github.com/react-dnd/react-dnd/issues/1132#issuecomment-472721592
上記のissueでは
"react-dnd": "7.1.0",
"react-dnd-html5-backend": "7.1.0"
にしたら直るみたいな記述がありますが、私の環境では直りませんでした。
DragDropContextProviderではなく、DragDropContextを使う方法も試したりもしましたが、状況は変わりませんでした。(ローカルだと動くが、ステージ環境だと画面真っ白)
何が原因なのかわからず、手探りな状態なのですが、原因に心当たりがありましたら回答お願いいたします。