Cannot read properties of undefined (reading 'toLowerCase')

[sahithyandev]

Bug report

Description / Observed Behavior

It gave the following error which seems impossible for a starter to debug.

D:\Projects\satori-test\node_modules\yoga-layout-prebuilt\yoga-layout\build\Release\nbind.js:53
        throw ex;
        ^

TypeError: Cannot read properties of undefined (reading 'toLowerCase')
    at D:\Projects\satori-test\node_modules\satori\dist\index.cjs:8:20073
    at Array.map (<anonymous>)
    at yt.getEngine (D:\Projects\satori-test\node_modules\satori\dist\index.cjs:8:20064)
    at nn (D:\Projects\satori-test\node_modules\satori\dist\index.cjs:5:13532)
    at nn.next (<anonymous>)
    at bt (D:\Projects\satori-test\node_modules\satori\dist\index.cjs:8:16716)
    at bt.next (<anonymous>)
    at eo (D:\Projects\satori-test\node_modules\satori\dist\index.cjs:9:28898)
    at D:\Projects\satori-test\index.js:13:23

Node.js v18.9.0

Expected Behavior

Work as intended, lol. Otherwise, provide enough info on what have I done wrong.

Reproduction

Reproduction: https://github.com/sahithyandev/satori-test

I did not use https://og-playground.vercel.app to create the reproduction as I am trying to run Satori locally.

Additional Context

Satori version: 0.0.43
Node.js version: 18.9.0

[sahithyandev]

What I found out

The above error is triggered as fontFamily is undefined here:

satori/src/font.ts

Lines 168 to 170 in 84898b0

	fontFamily = (Array.isArray(fontFamily) ? fontFamily : [fontFamily]).map(
	(name) => name.toLowerCase()
	)

That getEngine method is called from text.ts here

satori/src/text.ts

Lines 102 to 106 in 84898b0

	let engine = font.getEngine(
	baseFontSize,
	lineHeight as number,
	parentStyle as any
	)

parentStyle being an empty object causes the error.

satori/src/text.ts

Lines 22 to 33 in 84898b0

	const {
	parentStyle,
	inheritedStyle,
	parent,
	font,
	id,
	isInheritingTransform,
	debug,
	embedFont,
	graphemeImages,
	canLoadAdditionalAssets,
	} = context

I tried to fix it

This makes the error go away, but I don't know whether this change won't cause any other issues.

Alt for the image: The parentStyle variable is set to either context.inheritedStyle or context.parentStyle based on context.parentStyle being empty or not.

Edit 1: update links to code with permalinks.

[hrichiksite]

I'm facing the same problem every time I try to generate an image (SVG) with the lib.

[sahithyandev]

@hrichiksite You can fix the issue following my comment (or see sahithyandev@ed71509)

I hope your PR will be approved.

[Rohithgilla12]

Thanks for this wonderful library.

Any update on this issue @shuding ? 😄

[jeetiss]

@Rohithgilla12 could you approve that bug can be reproduced with latest version of satori?

It seems like your version depends on yoga-layout-prebuilt but satori has used yoga-warm-web for a while

[Rohithgilla12]

Yes, I have tested it with the latest version of satori and I'm still able to reproduce it

[felixhaeberle]

@shuding Thanks for building this great library!! 👍 :)
I'm also facing this problem, has somebody already found a solution expect of patching the code?

[shuding]

I'll prioritize it and make sure to have it fixed soon.

[github-actions]

🎉 This issue has been resolved in version 0.4.9 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀