1

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.

0 Answers0