fabricjs在导入reactjs时出错。

Question

我是反应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。

我不知道如何解决这些兼容性问题。谁能指导一下我。I will rally appreciate your help. 谢谢您的帮助。

Answer 1

我安装了fabric.js而不是react-fabric.js，并使用.NET技术导入。

import { fabric } from 'fabric';

然后项目就被编译了。