Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

bug: getting hf.fillPolygon is not a function error #179

Open
imballinst opened this issue Nov 19, 2021 · 6 comments · May be fixed by #188
Open

bug: getting hf.fillPolygon is not a function error #179

imballinst opened this issue Nov 19, 2021 · 6 comments · May be fixed by #188

Comments

@imballinst
Copy link

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

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

image

@imballinst imballinst changed the title getting hf.fillPolygon is not a function error bug: getting hf.fillPolygon is not a function error Nov 19, 2021
@imballinst imballinst changed the title bug: getting hf.fillPolygon is not a function error bug: getting hf.fillPolygon is not a function error Nov 19, 2021
@abizek
Copy link

abizek commented Nov 29, 2021

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

@neviaumi
Copy link

neviaumi commented Dec 4, 2021

for npm user , if you working on Node16+

you can force roughjs version by

 npm install --save [email protected]

@alexandrtovmach
Copy link

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

@wrkyle
Copy link

wrkyle commented Oct 1, 2023

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

@josuer08
Copy link

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

@paxperscientiam
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

7 participants