Unable to render content with React-Konva

Question

I've recently been getting the following error when trying to render a Stage with React-Konva: Cannot read property 'getPooled' of null at Object.componentDidMount. As of now, I've been unable to render anything at all using Konva. I'm using react-konva with typescript and webpack. The following is my simplified code:

---

.jsx:

import * as React from "react";
import * as ReactDOM from 'react-dom';
import { Layer, Stage, Rect, Group } from 'react-konva';

class Demo extends React.Component {

public render(): JSX.Element {
    return (
        <div style={{flex: 5}}>
            <Stage width={320} height={320} style={{width: '100%', height: '100%'}}>
                <Layer>
                   <Rect
                        height={32}
                        width={32}
                        x={0}
                        y={0}
                        fill={'#bb66bb'}
                    />
                </Layer>
            </Stage>
        </div>
    );
}
}

I've tracked down the issue to this line in the react-konva source code var transaction = ReactUpdates.ReactReconcileTransaction.getPooled(); Which I have (I believe) traced to the following code in ReactUpdates (which is part of react-dom).

var ReactUpdates = {
/**
* React references `ReactReconcileTransaction` using this property in order
* to allow dependency injection.
*
* @internal
*/
ReactReconcileTransaction: null,
...ommitted code here for brevity
};

module.exports = ReactUpdates;

Obviously, the referenced property is set to null...I just don't really understand why react-konva is referencing this property, or if i'm just misreading what's happening. Any ideas? (Also, I'm using v. 1.1.4 of react-konva and v. 15.5.4 of react-dom)

Answer 1

Found the issue! It was something in webpack.config.js

externals: {
    "react": "React",
    "react-dom": "ReactDOM",
    "canvas": "canvas"
}

All need to be disabled, and it worked like a charm (no idea why, unfortunately).