Why Flow cannot call ReactDOM.render with document.getElementById(...)
Aleksey L. got this first in the comments, I wanted to bring this info up to the answer level for easier visual scanning.
Flow is letting you know that the call document.getElementById("root");
can return null
in which case the app would completely crash. So let's guard against that:
const root = document.getElementById('root')
if (root !== null) {
ReactDOM.render(<App /> , root)
}
Granted, this can feel a little annoying given that in all likelihood you will be controlling the HTML you are rendering into.
While Cogell's answer is correct, I would argue to keep the code simpler and add an exception.
ReactDOM.render(
<Provider store={createStoreWithMiddleware(reducers)}>
<BrowserRouter>
<ScrollToTop>
<Switch>
<Route exact path="/" component={Home}/>
<Route path="/detail/:detailId" component={Detail}/>
<Route path="/level-of-game" component={LevelOfGame}/>
<Route path="*" component={NotFound} status={404}/>
</Switch>
</ScrollToTop>
</BrowserRouter>
</Provider>, // $FlowIgnore
document.getElementById("root")
);
Notice the "$FlowIgnore" comment
and then in your .flowconfig
file add this to the "options" field:
suppress_comment= \\(.\\|\n\\)*\\$FlowIgnore