Troubleshooting - FabricJS Design Tool

📦 Installation Issues

Module Not Found Error

Error: Cannot resolve module '@rifrocket/fabricjs-design-tool'

Solution 1: Verify Installation

# Check if package is installed
npm list @rifrocket/fabricjs-design-tool

# Reinstall if missing
npm install @rifrocket/fabricjs-design-tool

Solution 2: Clear Cache

# Clear npm cache
npm cache clean --force

# Remove node_modules and reinstall
rm -rf node_modules package-lock.json
npm install

Peer Dependency Warnings

Warning: fabric@UNMET PEER DEPENDENCY

Solution:

# Install required peer dependencies
npm install fabric react react-dom

# For TypeScript projects
npm install --save-dev @types/fabric

🎨 Canvas Issues

Canvas Not Rendering

Canvas appears blank or shapes don't show up

Check Canvas Initialization

// ❌ Wrong - element might not exist yet
const canvas = new fabric.Canvas('my-canvas');

// ✅ Correct - wait for DOM
useEffect(() => {
  const canvas = new fabric.Canvas('my-canvas');
  // ... rest of setup
}, []);

Call renderAll() After Adding Objects

// Always call renderAll after adding objects
canvas.add(rectangle);
canvas.add(circle);
canvas.renderAll(); // ← Important!

Canvas Size Issues

Canvas appears too small or doesn't fit container

Solution:

// Set canvas dimensions properly
canvas.setDimensions({
  width: container.clientWidth,
  height: container.clientHeight
});

// For responsive canvas
function resizeCanvas() {
  const container = canvas.getElement().parentElement;
  canvas.setDimensions({
    width: container.clientWidth,
    height: container.clientHeight
  });
}

window.addEventListener('resize', resizeCanvas);

Objects Not Selectable

Can't select or interact with canvas objects

Solution:

// Check canvas selection is enabled
canvas.selection = true;

// Check object selectability
object.selectable = true;
object.evented = true;

// For text objects
textObject.editable = true;

⚡ Performance Issues

Slow Rendering with Many Objects

Canvas becomes sluggish with many objects

Use Object Caching

// Enable object caching for static objects
object.set({
  objectCaching: true,
  statefullCache: true
});

Disable Unnecessary Features

// Disable features you don't need
canvas.set({
  skipTargetFind: true, // For non-interactive canvases
  renderOnAddRemove: false // Manually control rendering
});

// Batch operations
canvas.renderOnAddRemove = false;
canvas.add(obj1, obj2, obj3);
canvas.renderOnAddRemove = true;
canvas.renderAll();

Memory Leaks

Application memory usage keeps growing

Solution:

// Properly dispose canvas
useEffect(() => {
  const canvas = new fabric.Canvas('my-canvas');
  
  return () => {
    canvas.dispose(); // Clean up event listeners
  };
}, []);

// Remove event listeners
canvas.off('mouse:down', handler);

// Clear canvas properly
canvas.clear();
canvas.renderAll();

📝 TypeScript Issues

Type Definition Errors

Error: Property 'canvas' does not exist on type

Solution:

# Install type definitions
npm install --save-dev @types/fabric

# Add to tsconfig.json
{
  "compilerOptions": {
    "types": ["fabric"]
  }
}

Module Resolution Issues

TypeScript can't find module declarations

Solution:

// Create a types.d.ts file in your src folder
declare module '@rifrocket/fabricjs-design-tool' {
  export * from '@rifrocket/fabricjs-design-tool/lib/core';
}

declare module '@rifrocket/fabricjs-design-tool/ui' {
  export * from '@rifrocket/fabricjs-design-tool/lib/ui';
}

⚛️ React Integration Issues

Canvas Re-initialization on Re-render

Canvas gets recreated on every render

Solution:

// Use useRef to maintain canvas instance
const canvasRef = useRef(null);
const [canvas, setCanvas] = useState(null);

useEffect(() => {
  if (canvasRef.current && !canvas) {
    const fabricCanvas = new fabric.Canvas(canvasRef.current);
    setCanvas(fabricCanvas);
  }
}, [canvas]);

// Don't recreate canvas in render
return <canvas ref={canvasRef} />;

Hook Dependencies Warning

React Hook useEffect has missing dependencies

Solution:

// Use useCallback for event handlers
const handleObjectModified = useCallback((e) => {
  // Handle modification
}, [/* dependencies */]);

useEffect(() => {
  if (!canvas) return;
  
  canvas.on('object:modified', handleObjectModified);
  
  return () => {
    canvas.off('object:modified', handleObjectModified);
  };
}, [canvas, handleObjectModified]);

❌ Common Error Messages

Error: fabric is not defined

Fabric.js is not properly imported or loaded

// ✅ Correct import
import { fabric } from 'fabric';

// ✅ Or for older versions
import * as fabric from 'fabric';

Error: Cannot read property 'add' of null

Canvas is null when trying to add objects

// ✅ Always check canvas exists
if (canvas) {
  canvas.add(object);
}

// ✅ Or use optional chaining
canvas?.add(object);

Error: Object doesn't support property or method 'getBoundingRect'

Using wrong Fabric.js version or method

// ✅ Check Fabric.js version compatibility
npm list fabric

// ✅ Use correct method name
const bounds = object.getBoundingRect(); // v5+
// or
const bounds = object.getBounds(); // older versions

🔧 Troubleshooting

📦 Installation Issues

Module Not Found Error

Solution 1: Verify Installation

Solution 2: Clear Cache

Peer Dependency Warnings

Solution:

🎨 Canvas Issues

Canvas Not Rendering

Check Canvas Initialization

Call renderAll() After Adding Objects

Canvas Size Issues

Solution:

Objects Not Selectable

Solution:

⚡ Performance Issues

Slow Rendering with Many Objects

Use Object Caching

Disable Unnecessary Features

Memory Leaks

Solution:

📝 TypeScript Issues

Type Definition Errors

Solution:

Module Resolution Issues

Solution:

⚛️ React Integration Issues

Canvas Re-initialization on Re-render

Solution:

Hook Dependencies Warning

Solution:

❌ Common Error Messages

Error: fabric is not defined

Error: Cannot read property 'add' of null

Error: Object doesn't support property or method 'getBoundingRect'

🆘 Getting Help

📚 Documentation

💬 Community Support

🐛 Reporting Bugs