title: What's the best way to reference a js ArrayBuffer using React/Babel6?
body: <p>I am trying to update a canvas using a react component with processing done in a worker thread. I have all the hard parts working fine in EMCA5, but porting to React/Babel/JSX, my biggest hangup is the system no longer recognizes ArrayBuffer to pass data to the worker thread. The following code dies with 'TypeError: ArrayBuffer is not a constructor':</p>
  
  <pre><code>import React from 'react';
  // import Calculater etc...
  
  export default class CalculationDisplay extends React.Component {
      componentDidMount() {
          var buffer = new ArrayBuffer(100 * 100 * 4);
          var view = new Uint32Array(buffer);
          var calculator = new Calculator(view);
          const ctx = this.refs.canvas.getContext('2d');
          // worker calculation and display goes here...
      }
  
      render() {
          return (
              &lt;canvas ref="canvas" width={600} height={600}/&gt;
          );
      }
  }
  </code></pre>
  
  <p>After a bunch of research into babel-polyfill and core-js, all variations I could think of on the following die the same way:</p>
  
  <pre><code>var ArrayBuffer = require('core-js/modules/es6.typed.array-buffer');
  import ArrayBuffer from 'core-js/modules/es6.typed.array-buffer';
  import { ArrayBuffer } from 'core-js/modules/es6.typed.array-buffer';
  import { ArrayBuffer } from 'babel-polyfill';
  </code></pre>
  
  <p>The only thing I found that works so far is to forget any imports/requires and just access ArrayBuffer and it's ilk this way:</p>
  
  <pre><code>    var buffer = new global.ArrayBuffer(100 * 100 * 4);
      var view = new global.Uint32Array(buffer);
  </code></pre>
  
  <p>..this actually works and the display shows up on the page, but it seems ugly and I can't imagine this is the intended way to reference ArrayBuffer. Has anyone had success importing js ArrayBuffer and related classes so they can be accessed as expected?</p>
  
  <p>..OK following zerkms suggestion I updated to:</p>
  
  <pre><code>import React from 'react';
  import 'babel-polyfill';
  // import Calculater etc...
  
  export default class CalculationDisplay extends React.Component {
      componentDidMount() {
          var buffer = new ArrayBuffer(100 * 100 * 4);
          var view = new Uint32Array(buffer);
  . . . 
  </code></pre>
  
  <p>..and it works without error - I guess I was getting too fancy with trying to import the classnames from babel-polyfill previously. </p>