[Bug]: document not error on node-fabric with latest 6.0.2 release

[girish1729]

CheckList

• I agree to follow this project's Code of Conduct
• I have read and followed the Contributing Guide
• I have read and followed the Issue Tracker Guide
• I have searched and referenced existing issues and discussions
• I am filing a BUG report.
• I have managed to reproduce the bug after upgrading to the latest version
• I have created an accurate and minimal reproduction

Version

6.0.2

In What environments are you experiencing the problem?

Node.js

Node Version (if applicable)

21.6.1

Link To Reproduction

The latest fabric.js errors out saying document not found

Steps To Reproduce

1. Just run this sample code
2. I tried fixing it following your breaking changes document Changelog
3. I am sure I am not missing something obvious here.

Expected Behavior

Well you need it to work like before.

Actual Behavior

ReferenceError: document is not defined
    at m (file:///home/girish/photoveda/api/node_modules/fabric/dist/index.min.mjs:1:3466)
    at v (file:///home/girish/photoveda/api/node_modules/fabric/dist/index.min.mjs:1:3671)
    at vt (file:///home/girish/photoveda/api/node_modules/fabric/dist/index.min.mjs:1:12768)
    at file:///home/girish/photoveda/api/node_modules/fabric/dist/index.min.mjs:1:195882
    at Lo._measureChar (file:///home/girish/photoveda/api/node_modules/fabric/dist/index.min.mjs:1:195938)
    at Lo._getGraphemeBox (file:///home/girish/photoveda/api/node_modules/fabric/dist/index.min.mjs:1:197355)
    at Lo._measureLine (file:///home/girish/photoveda/api/node_modules/fabric/dist/index.min.mjs:1:196544)
    at Lo.measureLine (file:///home/girish/photoveda/api/node_modules/fabric/dist/index.min.mjs:1:196256)
    at Lo.getLineWidth (file:///home/girish/photoveda/api/node_modules/fabric/dist/index.min.mjs:1:202175)
    at Lo.calcTextWidth (file:///home/girish/photoveda/api/node_modules/fabric/dist/index.min.mjs:1:194291)

Node.js v21.6.1

Error Message & Stack Trace

import fs from 'fs';
import path from 'path';
    import * as fabric from 'fabric';
import {StaticCanvas} from 'fabric/node';
    var __dirname = path.resolve();
    var out = fs.createWriteStream(__dirname + '/helloworld.png');

var canvas = new StaticCanvas(null, { width: 800, height: 600 });
var text = new fabric.FabricText('Hello world', {
  left: 100,
  top: 100,
  fill: '#f55',
  angle: 15
});
canvas.add(text);
canvas.renderAll();

var stream = canvas.createPNGStream();
stream.on('data', function(chunk) {
  out.write(chunk);
});

[asturur]

Can you try to remove the fabric import and leave only the 'fabric/node'?

[girish1729]

Can you try to remove the fabric import and leave only the 'fabric/node'?

Ok that fixed it.

This is updated code for reference.

import fs from 'fs';
import path from 'path';
    import * as fabric from 'fabric/node';
import {StaticCanvas} from 'fabric/node';
    var __dirname = path.resolve();
    var out = fs.createWriteStream(__dirname + '/helloworld.png');

var canvas = new StaticCanvas(null, { width: 800, height: 600 });
var text = new fabric.FabricText('Hello world', {
  left: 100,
  top: 100,
  fill: '#f55',
  angle: 15
});
canvas.add(text);
canvas.renderAll();

var stream = canvas.createPNGStream();
stream.on('data', function(chunk) {
  out.write(chunk);
});

[girish1729]

Much thanks.

[asturur]

fabric and fabric/node import the same code apart some configuration changes for node and jsdom.

// First we set the env variable

import { setEnv } from './src/env';
import { getEnv, getNodeCanvas } from './src/env/node';

setEnv(getEnv());

// After the env is set we can export everything and expose specific node functionality

import type { JpegConfig, PngConfig } from 'canvas';
import {
  Canvas as CanvasBase,
  StaticCanvas as StaticCanvasBase,
} from './fabric';
import { FabricObject } from './src/shapes/Object/Object';

FabricObject.ownDefaults.objectCaching = false;

export * from './fabric';

export class StaticCanvas extends StaticCanvasBase {
  getNodeCanvas() {
    return getNodeCanvas(this.getElement());
  }
  createPNGStream(opts?: PngConfig) {
    return this.getNodeCanvas().createPNGStream(opts);
  }
  createJPEGStream(opts?: JpegConfig) {
    return this.getNodeCanvas().createJPEGStream(opts);
  }
}

/**
 * **NOTICE**:
 * {@link Canvas} is designed for interactivity.
 * Therefore, using it in node has no benefit.
 * Use {@link StaticCanvas} instead.
 */
export class Canvas extends CanvasBase {
  getNodeCanvas() {
    return getNodeCanvas(this.getElement());
  }
  createPNGStream(opts?: PngConfig) {
    return this.getNodeCanvas().createPNGStream(opts);
  }
  createJPEGStream(opts?: JpegConfig) {
    return this.getNodeCanvas().createJPEGStream(opts);
  }
}

this is the node entrypoint.
As you see it export the whole fabric as is, but before it runs the setEnv function.
That's all it does.
The env class is the one that gives you a jsdom document in node and a real browser document in the browser.

[girish1729]

You must change your Breaking changes page to say this.

import * as fabric from 'fabric/node'

Currently it asks you to import 'fabric' which is what tripped me.

[asturur]

i will update this:
https://fabricjs.github.io/docs/upgrading/upgrading-to-fabric-60/

[chinyifei]

Please continue to improve the documentation and hope to add some code demos

[asturur]

Yeah it takes time and writing abilities that are different from coding skills.