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':
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 (
<canvas ref="canvas" width={600} height={600}/>
);
}
}
After a bunch of research into babel-polyfill and core-js, all variations I could think of on the following die the same way:
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';
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:
var buffer = new global.ArrayBuffer(100 * 100 * 4);
var view = new global.Uint32Array(buffer);
..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?
..OK following zerkms suggestion I updated to:
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);
. . .
..and it works without error - I guess I was getting too fancy with trying to import the classnames from babel-polyfill previously.