reactjs - 无法使用 React-Konva 渲染内容

Question

我最近在尝试使用 React-Konva 渲染 Stage 时遇到以下错误:无法读取 Object.componentDidMount 处的 null 属性“getPooled”。到目前为止，我根本无法使用 Konva 渲染任何内容。我正在将 React-konva 与 typescript 和 webpack 结合使用。以下是我的简化代码:

<小时/>

.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>
    );
}
}

我已经在 react-konva 源代码中的这一行中找到了问题var transaction = ReactUpdates.ReactReconcileTransaction.getPooled();我(我相信)在ReactUpdates(它是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;

显然，引用的属性设置为null...我只是不太明白为什么react-konva引用这个属性，或者如果我只是误读了正在发生的事情。有任何想法吗？(另外，我正在使用react-konva的v.1.1.4和react-dom的v.15.5.4)

Answer 1

发现问题了!这是 webpack.config.js

中的内容

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

所有这些都需要禁用，而且它就像一个魅力(不幸的是，不知道为什么)。