CODEWITHSUNDEEP
reactjsfabricjs
user774294
user774294

Reputation: 141

fabricjs gives error while importing with reactjs

I am new to react js. I want to build a designer using fabricjs and reactjs. I have created a component with the following code :

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;

When I add code to import fabricjs and compile. I get the following error enter image description here

i have tried installing all the dependencies of fabric i.e. deep-diff, fabric-webpack and object-assign. I get the following error when installing the dependencies.enter image description here

My reactjs version is ^16.13.1

I don't know how to solve these compatibility issues. Can someone pleas guide me. I will rally appreciate your help. Thanks in advance

Upvotes: 0

Views: 409

Answers (1)

user774294
user774294

Reputation: 141

I installed fabric.js instead of react-fabric.js and imported using :

import { fabric } from 'fabric';

and the project got compiled.

Upvotes: 0

Related Questions