Why React gantt application renders a blank page and how to fix it ?

Here, the below possible solution might help you if you encounter the problem like "ReferenceError: Can't find variable: Map" error in the browser console window by pressing "F12" .

React 16 (or) React Fiber doesn't support Older Browser.

An blank page will be displayed and you get the "ReferenceError: Can't find variable: Map" error in browser console, which means that the older browser natively not supported React Fiber features of "Map" and "Set" .

To fix this issue:

To support older browser, you need to include a "babel-polyfill" in the entry point of the bundled application. Because, React Fiber depends on the collection types "Map" and "Set" .

Adding "babel-polyfill" in the entry array of webpack.config.js.

module.exports = {

entry: ["babel-polyfill", "./app.js"]

};

(OR)

Otherwise, you should import "babel-polyfill" at the top of entry file like this (app.js).

import 'babel-polyfill';