fabricjs在使用reactjs导入时出现错误

Question

我对react js是个新手。我想建立一个使用fabricjs和reactjs的设计器。我用下面的代码创建了一个组件：

import React, { Component } from 'react';
import { fabric } from 'react-fabricjs';

class APage extends React.Component {

componentDidMount() { 
        const leftcanvas = new fabric.Canvas('leftCanvas');
        const rightcanvas = new fabric.Canvas('rightCanvas');

        // do some stuff with it
      }

render()
    { 
        return (
            <div class="col-xs-6 col-lg-6 col-md-6 col-sm-6">
          <div>
            <canvas id="leftCanvas" width="300" height="350" style={{border:"1px solid #000000"}} />
            <canvas id="rightCanvas" width="300" height="350" style={{border:"1px solid #000000"}} />
          </div>
          </div>
        )
    }
}

export default APage;

当我添加代码来导入fabricjs并编译时。我得到以下错误

​

我已经尝试安装了fabric的所有依赖项，即deep-diff、fabric-webpack和object-assign。在安装依赖项时，我得到了以下错误。

​

我的reactjs版本是^16.13.1

我不知道如何解决这些兼容性问题。有谁能指引我。我将再次感谢你的帮助。提前感谢

Answer 1

我安装了fabric.js而不是react-fabric.js .js，并使用以下命令导入：

import { fabric } from 'fabric';

然后这个项目就被编译了。