How to solve Highcharts xrange error in React?

Question

I'm trying to generate xrange type HighChart on my app but I'm facing below error.

Error is as below in browser:

Uncaught TypeError: Cannot read property 'parts/Globals.js' of undefined
    at xrange.js:10

Below packages are used from NPM:

import ReactHighcharts from 'react-highcharts'
var xrange = require('highcharts/modules/xrange');

(xrange)(ReactHighcharts)

Chart Config is as below. But it doesnt reaches the chart loading part. I get error right in module loading.:

{
    chart: {
      type: 'xrange'
    },
    title: {
      text: 'Highcharts X-range'
    },
    xAxis: {
      type: 'datetime'
    },
    yAxis: {
      title: {
        text: ''
      },
      categories: ['Prototyping', 'Development', 'Testing'],
      reversed: true
    },
    series: [{
      name: 'Project 1',
      // pointPadding: 0,
      // groupPadding: 0,
      pointWidth: 20,
      data: [{
        x: Date.UTC(2014, 10, 21),
        x2: Date.UTC(2014, 11, 2),
        y: 0,
        partialFill: 0.25
      }],
      dataLabels: {
        enabled: true
      }
    }]
  }