-
-
Notifications
You must be signed in to change notification settings - Fork 337
Description
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.4
or something, because4.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); } 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);
}