bug: getting `hf.fillPolygon is not a function` error
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 to4.4or something, because4.5is where it breaks. - Update this function: https://github.com/rough-stuff/wired-elements/blob/381ce6f84a657719b06073e18221cd640de11de8/src/wired-lib.ts#L120-L124 I'm unsure about the proper solution, but I tried hardcoding my
node_modules/wired-elements/lib/wired-lib.jsto 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: https://github.com/rough-stuff/rough/commit/24fd61d3be2dd411f4153b2885ed3d912a3b56fd#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);
}

Facing the same issue, fixed it with the yarn workaround for now.
for npm user , if you working on Node16+
you can force roughjs version by
npm install --save [email protected]
https://github.com/rough-stuff/wired-elements/issues/179#issuecomment-986052290 it's a fix. Issue can be closed
This issue remains for wired-tabs and wired-listbox using roughjs v4.6.
This is still a problem in the newest version for wired-tabs and wired-listbox