TypeError: t is not an Object (Evaluating 'n in t')
elchicofrommo opened this issue · comments
I'm sure my problem must be due to user error and lack of understanding around my env. I'm using Expo and AnimatedSVGPath. But when I try to create an animated path I get the mentioned error when it tries to create svgPathProperties(d) (see code)
d={"M0,100 Q50,-50 100,100 T200,100"}
constructor(props) {
super(props);
const { d, reverse, length} = this.props;
const properties = svgPathProperties(d) // right here.
this.length = length ? length: 1000;
this.strokeDashoffset = new Animated.Value(!reverse ? this.length : 0);
}
Here's my dependencies listed in package.json. For now I've commented out the line where AnimatedSVGPath creates a svgPathProperties and instead pass in a value directly but I'd like to not have to hack AnimatedSVGPath. Any thoughts?
{
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web",
"eject": "expo eject"
},
"dependencies": {
"@fortawesome/fontawesome-svg-core": "^1.2.28",
"@fortawesome/free-solid-svg-icons": "^5.13.0",
"@fortawesome/react-native-fontawesome": "^0.2.5",
"@react-native-community/masked-view": "0.1.6",
"@react-navigation/native": "^5.4.0",
"@react-navigation/stack": "^5.3.7",
"expo": "~37.0.3",
"react": "~16.9.0",
"react-dom": "~16.9.0",
"react-native": "https://github.com/expo/react-native/archive/sdk-37.0.1.tar.gz",
"react-native-flip-card": "^3.5.6",
"react-native-gesture-handler": "~1.6.0",
"react-native-safe-area-context": "0.7.3",
"react-native-screens": "~2.2.0",
"react-native-snap-carousel": "^3.9.0",
"react-native-svg": "11.0.1",
"react-native-svg-animations": "^0.2.0",
"react-native-svg-transformer": "^0.14.3",
"react-native-swiper": "^1.6.0",
"react-native-web": "~0.11.7",
"svg-path-properties": "^1.0.4"
},
"devDependencies": {
"@babel/core": "^7.8.6",
"@types/react": "~16.9.23",
"@types/react-native": "~0.61.17",
"@types/react-native-snap-carousel": "^3.8.1",
"babel-preset-expo": "~8.1.0",
"typescript": "~3.8.3"
},
"private": true
}
d should be a string. Are you passing it as a string?
Turned out it was an error for a Iibrary in how they were calling for this. I’ll close it now.
I seem to be hitting this with path being a string. This is the piece of code and its output:
import { curveBasis, line } from 'd3-shape'
const path = line()
.x(d => x(dateAccessor(d)))
.y(d => y(valueAccessor(d)!))
.curve(curveBasis)(data)
console.log(path)
console.log(typeof path)
const pathProps = svgPathProperties(path) // This line throws the error[Thu Jan 28 2021 16:27:53.450] LOG M58.88186412336089,-0.5999999999999943L58.8058769481539,-0.8666666666666624C58.72988977294691,-1.1333333333333304,58.577915422532946,-1.6666666666666667,58.330957103110244,-1.7666666666666682C58.08399878368753,-1.8666666666666696,57.742056495256094,-1.533333333333336,57.4191110006264,-1.666666666666669C57.09616550599671,-1.8000000000000018,56.792216805168756,-2.400000000000001,56.52626169194431,-2.366666666666667C56.260306578719856,-2.3333333333333335,56.0323450530989,-1.6666666666666667,55.76638993987444,-1.6333333333333329C55.50043482665,-1.599999999999999,55.196486125822055,-2.199999999999998,54.64557910557141,-2.566666666666665C54.09467208532075,-2.9333333333333322,53.296806745647395,-3.0666666666666678,52.76489651919849,-2.7333333333333343C52.23298629274959,-2.400000000000001,51.96703117952513,-1.599999999999999,49.62963400883522,-1.6666666666666643C47.29223683814532,-1.7333333333333296,42.88339760998997,-2.666666666666662,40.50800685169657,-3.133333333333328C38.13261609340318,-3.5999999999999943,37.79067380497174,-3.5999999999999943,37.35374754753156,-3.799999999999995C36.9168212900914,-3.999999999999995,36.3849110636425,-4.399999999999996,35.70102648677962,-4.43333333333333C35.01714190991674,-4.466666666666664,34.181282982639885,-4.13333333333333,33.64937275619098,-4.0666666666666655C33.11746252974208,-4,32.889501004121115,-4.200000000000003,30.040773466934194,-3.8333333333333357C27.19204592974728,-3.4666666666666686,21.722552380994404,-2.5333333333333314,17.27809416446078,-2.93333333333333C12.83363594792715,-3.3333333333333286,9.414213063612763,-5.066666666666663,7.4947453565612845,-5.299999999999997C5.575277649509807,-5.533333333333331,5.155765119721235,-4.266666666666666,4.7750377106112305,-3.5C4.394310301501226,-2.7333333333333343,4.0523680130697874,-2.4666666666666686,3.6534353432331095,-2.000000000000002C3.2545026733964306,-1.533333333333336,2.7985796221545125,-0.8666666666666695,2.4186437461195807,-0.20000000000000284C2.038707870084649,0.46666666666666384,1.7347591692567035,1.1333333333333304,1.4226972544092622,1.6333333333333304C1.1106353395618207,2.1333333333333306,0.7904602106948833,2.4666666666666637,0.4793217511016934,2.366666666666665C0.16818329150850353,2.2666666666666657,-0.13391849881093876,1.7333333333333343,-0.380494243914026,1.7000000000000004C-0.6270699890171132,1.6666666666666667,-0.8181196889038453,2.1333333333333306,-1.046806786510288,2.2333333333333294C-1.2754938841167303,2.3333333333333286,-1.5418183794428835,2.066666666666663,-1.8079713759361038,2.1666666666666643C-2.074124372429324,2.2666666666666657,-2.340105870089612,2.7333333333333343,-2.60627205880075,3.133333333333335C-2.8724382475118886,3.5333333333333363,-3.1387891272738777,3.8666666666666694,-3.4046123183191512,3.800000000000002C-3.6704355093644243,3.7333333333333343,-3.9357310116929827,3.2666666666666657,-4.201541010520338,3.066666666666665C-4.467351009347694,2.866666666666665,-4.733675504673847,2.9333333333333322,-4.866837752336924,2.9666666666666663L-5,3
[Thu Jan 28 2021 16:27:53.450] LOG stringThe path constant here is producing the expected SVG when sent as the d prop of an SVG path.
This is a link to a codepen with the SVG being shown up: https://codepen.io/dangonrei/pen/jOVNQRj
Do you have any idea about what could be the root cause of this?
It's working for me:
test("Large string", test => {
const largeString =
"M58.88186412336089,-0.5999999999999943L58.8058769481539,-0.8666666666666624C58.72988977294691,-1.1333333333333304,58.577915422532946,-1.6666666666666667,58.330957103110244,-1.7666666666666682C58.08399878368753,-1.8666666666666696,57.742056495256094,-1.533333333333336,57.4191110006264,-1.666666666666669C57.09616550599671,-1.8000000000000018,56.792216805168756,-2.400000000000001,56.52626169194431,-2.366666666666667C56.260306578719856,-2.3333333333333335,56.0323450530989,-1.6666666666666667,55.76638993987444,-1.6333333333333329C55.50043482665,-1.599999999999999,55.196486125822055,-2.199999999999998,54.64557910557141,-2.566666666666665C54.09467208532075,-2.9333333333333322,53.296806745647395,-3.0666666666666678,52.76489651919849,-2.7333333333333343C52.23298629274959,-2.400000000000001,51.96703117952513,-1.599999999999999,49.62963400883522,-1.6666666666666643C47.29223683814532,-1.7333333333333296,42.88339760998997,-2.666666666666662,40.50800685169657,-3.133333333333328C38.13261609340318,-3.5999999999999943,37.79067380497174,-3.5999999999999943,37.35374754753156,-3.799999999999995C36.9168212900914,-3.999999999999995,36.3849110636425,-4.399999999999996,35.70102648677962,-4.43333333333333C35.01714190991674,-4.466666666666664,34.181282982639885,-4.13333333333333,33.64937275619098,-4.0666666666666655C33.11746252974208,-4,32.889501004121115,-4.200000000000003,30.040773466934194,-3.8333333333333357C27.19204592974728,-3.4666666666666686,21.722552380994404,-2.5333333333333314,17.27809416446078,-2.93333333333333C12.83363594792715,-3.3333333333333286,9.414213063612763,-5.066666666666663,7.4947453565612845,-5.299999999999997C5.575277649509807,-5.533333333333331,5.155765119721235,-4.266666666666666,4.7750377106112305,-3.5C4.394310301501226,-2.7333333333333343,4.0523680130697874,-2.4666666666666686,3.6534353432331095,-2.000000000000002C3.2545026733964306,-1.533333333333336,2.7985796221545125,-0.8666666666666695,2.4186437461195807,-0.20000000000000284C2.038707870084649,0.46666666666666384,1.7347591692567035,1.1333333333333304,1.4226972544092622,1.6333333333333304C1.1106353395618207,2.1333333333333306,0.7904602106948833,2.4666666666666637,0.4793217511016934,2.366666666666665C0.16818329150850353,2.2666666666666657,-0.13391849881093876,1.7333333333333343,-0.380494243914026,1.7000000000000004C-0.6270699890171132,1.6666666666666667,-0.8181196889038453,2.1333333333333306,-1.046806786510288,2.2333333333333294C-1.2754938841167303,2.3333333333333286,-1.5418183794428835,2.066666666666663,-1.8079713759361038,2.1666666666666643C-2.074124372429324,2.2666666666666657,-2.340105870089612,2.7333333333333343,-2.60627205880075,3.133333333333335C-2.8724382475118886,3.5333333333333363,-3.1387891272738777,3.8666666666666694,-3.4046123183191512,3.800000000000002C-3.6704355093644243,3.7333333333333343,-3.9357310116929827,3.2666666666666657,-4.201541010520338,3.066666666666665C-4.467351009347694,2.866666666666665,-4.733675504673847,2.9333333333333322,-4.866837752336924,2.9666666666666663L-5,3";
const properties = new SVGPathProperties(largeString);
test.true(inDelta(properties.getTotalLength(), 72.3454, 0.1));
test.end();
});
Can you check it, using this code (not the test part, of course), please?
Problem solved!
Your code works. I tried my own code passing the string hadrcoded and it failed, but when your code worked I started looking for differences. Then I saw the new in your code, which I wasn't using in mine. So that was it, I was calling the constructor without new and it was throwing that error.
My bad given that all the examples use new. However, re-reading the README I went through the "Using new" section which I had missed last time, and it says it should work without new. Not sure if that bit is outdated in the readme and not using new is completely deprecated by now. Probably worth noting that I'm using TypeScript. Maybe new is mandatory in TypeScript? I'm fairly new to TS, so I'm not sure if that even makes sense...
Anyways, it works great using new.
Thanks for your help! :)
@dgrcode Should not make a difference:
svg-path-properties/src/index.ts
Lines 9 to 11 in 346a9f0
If you don't use new, then the code should be detecting that and use new for you
I see. I'm not sure why or how it doesn't work (for me) without the new keyword, but that's definitely fixing my code.
I'm fairly new to TypeScript, so I'm not sure why it's not working just reading the code you linked. I'm also using this package in a react native project, and I can't manage to get the debugger working there.
I've set a console.log just on top of that if statement, but I don't see it printing either. Maybe my compiled project is using the files in /dist and I'm adding the statement in the /src file.
I'm happy to dig deeper, but I'm not sure how to do it.
Reading the stack overflow question linked in the source code, I see the implementation of the solution also depends on the target js compiled code, so it could even be some configuration in my project.
All in all using new fixes it for me, so that's good news :)