bug: getting `hf.fillPolygon is not a function` error

[imballinst]

Hello! First of all, thank you for creating this library. I wish to submit a bug report (or at least I think it is).

TL;DR

I am getting hf.fillPolygon is not a function error when I run a Sandbox locally: https://codesandbox.io/s/react-wrapper-for-wired-elements-forked-fef11?file=/src/index.js.

There are 2 options that I think this can be fixed:

• Lock the dependency to roughjs -- don't use ^. I think locking dependencies can be a good idea because module resolutions are extremely tricky. Change it to 4.4 or something, because 4.5 is where it breaks.
• Update this function:

  wired-elements/src/wired-lib.ts

  Lines 120 to 124 in 381ce6f

  	export function hachureFill(points: Point[], seed: number): SVGElement {
  	const hf = new ZigZagFiller(fillHelper);
  	const ops = hf.fillPolygon(points, options(seed));
  	return createPathNode(ops, null);
  	}

  I'm unsure about the proper solution, but I tried hardcoding my node_modules/wired-elements/lib/wired-lib.js to this and the problem is gone:

export function hachureFill(points, seed) {
    const hf = new ZigZagFiller(fillHelper);
    const ops = hf.fillPolygons([points], options(seed));
    return createPathNode(ops, null);
}

Long explanation

I am using the version 0.1.5 version of wired-elements-react (https://github.com/rough-stuff/wired-elements-react) -- which I think is a React wrapper, pure, without additional logic for this repository.

Things are working OK, except when I am trying to use wired-tab, or WiredTab. This sandbox https://codesandbox.io/s/react-wrapper-for-wired-elements-forked-fef11?file=/src/index.js works fine, but when I downloaded this to my local and ran it, I get this error:

Tracing through the error stack, I found out that this is where the code errored: https://github.com/rough-stuff/wired-elements/search?q=fillPolygon.

I tried to find out the version of roughjs I am using. If I do fresh install without lockfile, I get this:

roughjs@^4.3.1:
  version "4.5.0"
  resolved "https://registry.yarnpkg.com/roughjs/-/roughjs-4.5.0.tgz#b4cbd63d4ed6b0b613082b4f7f9bf0e55cd4ba0d"
  integrity sha512-4c3RBuTR41uGbTT/WzG4dzu4dfxhFWrhx9ZLbjaKPazX67nQjvU//pWYw/XjbcDW3iQGxac8plBbgdWkEsnNDg==
  dependencies:
    path-data-parser "^0.1.0"
    points-on-curve "^0.2.0"
    points-on-path "^0.2.1"

Now, I think this is an issue, because 10ish days ago, there was a new version in roughjs which changes fillPolygon with fillPolygons in almost all Filler classes: rough-stuff/rough@24fd61d#diff-054c66f0fb4838b0ff226ca4dea0ebcc007364ff1baf314d788a8015cbac108a. This makes the old fillPolygon to be nonexistent, and hence the error shows up.

This problem is fixed, if I am using yarn and I add this to ensure that child deps are resolved properly:

"resolutions": {
  "roughjs": "4.4"
},

And then the error is gone. Alternatively, I can also confirm that changing the hashureFill to this also works (though I'm unsure whether it will cause additional problems or not):

export function hachureFill(points, seed) {
    const hf = new ZigZagFiller(fillHelper);
    const ops = hf.fillPolygons([points], options(seed));
    return createPathNode(ops, null);
}

[abizek]

Facing the same issue, fixed it with the yarn workaround for now.

[neviaumi]

for npm user , if you working on Node16+

you can force roughjs version by

 npm install --save roughjs@4.4

[alexandrtovmach]

#179 (comment) it's a fix. Issue can be closed

[wrkyle]

This issue remains for wired-tabs and wired-listbox using roughjs v4.6.

[josuer08]

This is still a problem in the newest version for wired-tabs and wired-listbox

[paxperscientiam]

Anyone got a recommendation for a library even close to as good as this one?