0

Using EraserBrush in Fabric.js with React, getting 'fabric.EraserBrush is not a constructor' error

I am trying to use the EraserBrush from Fabric.js in my React application. Since the EraserBrush is not included in the default build of Fabric.js, I downloaded a custom build and included it in the node_modules/fabric/dist directory of my app. However, I am encountering the following error:

fabric__WEBPACK_IMPORTED_MODULE_1__.fabric.EraserBrush is not a constructor TypeError: fabric__WEBPACK_IMPORTED_MODULE_1__.fabric.EraserBrush is not a constructor

Here is a simplified version of my code:

import React, {useEffect, useState, useRef} from 'react';
import { fabric } from 'fabric';

const Whiteboard = () => {

  const canvasRef = useRef(null)

  let canvas;
  useEffect(() => {
    canvas = new fabric.Canvas(canvasRef.current);
    canvas.setHeight(window.innerHeight);
    canvas.setWidth(window.innerWidth);
    canvas.isDrawingMode = true;
    canvas.freeDrawingBrush.width = 5;
    canvas.freeDrawingBrush.color = '#000000';

    return () => canvas.dispose();
  },[])

  const handleColorChange = (newColor) => {
    canvas.freeDrawingBrush.color = newColor;
    canvas.renderAll();
  }

  const handleErase = () => {
    canvas.freeDrawingBrush = new fabric.EraserBrush(canvasRef.current);
    canvas.isDrawingMode = true;
  }

  const handleClear = () => {
    canvas.clear();
    canvas.renderAll();
  }

  return(
    <div>
      <div>
        <button onClick={() => handleColorChange('#FF0000')}>Red</button>
        <button onClick={() => handleColorChange('#00FF00')}>Green</button>
        <button onClick={() => handleColorChange('#0000FF')}>Blue</button>
        <button onClick={handleErase}>Erase</button>
        <button onClick={handleClear}>Clear</button>
      </div>
      <canvas id='canvas' ref={canvasRef}/>
    </div>
  );
}


export default Whiteboard;

I have already followed the steps mentioned in the Fabric.js documentation, but I am still facing this issue. How can I resolve this error and successfully use the EraserBrush in my React application?

Roshith Krishna P
  • 1

1 Answers1

0

Today, I also wanted to use the EraserBrush in Fabric.js, but I didn't use it the way you did. This is how I did it.

  1. First, I installed version 5.3.0 of Fabric.js by running npm install fabric@5.3.0 . If you don't specify a version, it will install version 6.0-beta10, which has some changes in the location of some script files.

  2. I added "postinstall": "node post_install.js" to my package.json file.

  3. I created a post_install.js file in the root directory of my project."

here is post_install.js content:

const fs = require("fs");
const path = require("path");
const { spawn } = require("child_process");
const fabricJSPath = path.join(__dirname, 'node_modules', 'fabric');

const npmBuild = spawn('node', ['run', 'build', 'modules=ALL', 'exclude=accessors,gestures', 'requirejs'], {
  cwd: fabricJSPath
});

npmBuild.stdout.on('data', (data) => {
  console.log(`stdout: ${data}`);
});

npmBuild.stderr.on('data', (data) => {
  console.error(`stderr: ${data}`);
});

npmBuild.on('close', (code) => {
  console.log(`child process exited with code ${code}`);
});

In this way, after each installation of fabric, it will be automatically processed.

hope this helps.

Lemon Nation
  • 1