wired-elements icon indicating copy to clipboard operation
wired-elements copied to clipboard

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

Open imballinst opened this issue 4 years ago • 6 comments

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.

image

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

image

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:

image

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

image

imballinst avatar Nov 19 '21 00:11 imballinst

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

abizek avatar Nov 29 '21 09:11 abizek

for npm user , if you working on Node16+

you can force roughjs version by

 npm install --save [email protected]

neviaumi avatar Dec 04 '21 16:12 neviaumi

https://github.com/rough-stuff/wired-elements/issues/179#issuecomment-986052290 it's a fix. Issue can be closed

alexandrtovmach avatar Dec 01 '22 22:12 alexandrtovmach

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

wrkyle avatar Oct 01 '23 04:10 wrkyle

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

josuer08 avatar Oct 28 '23 03:10 josuer08