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

imballinst commented 2 years ago

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: 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.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: 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);
}