Invalid value for props `lang`: "unknown"

[Mr94t3z]

Describe the bug

I try to run it locally using devtools, but I always get this error:

Error: Invalid value for props `lang`: "unknown". The value must be one of the following: ja-JP, ko-KR, zh-CN, zh-TW, zh-HK, th-TH, bn-IN, ar-AR, ta-IN, ml-IN, he-IL, te-IN, devanagari, kannada, emoji, symbol, math.

This error only shows if I fetch the user (woj.eth) - https://warpcast.com/woj.eth on the display_name.

Link to Minimal Reproducible Example

https://github.com/Mr94t3z/paywithglide/blob/8386eeaae6caa478fa742bacd8d6d2d5184361e6/api/index.tsx#L270

Steps To Reproduce

Here's the full code on app.image route:

app.image("/review-image/:toFid", async (c) => {
  const { toFid } = c.req.param();

  const user = await fetchUserData(toFid);

  const pfpUrl = user.pfp_url;

  const parsedName = parseFullName(user.display_name);

  const displayName = parsedName.first || user.display_name;

  const username = user.username;

  const bio = user.profile.bio.text;

  const followers = user.follower_count;

  return c.res({
    headers: {
      "cache-control": "no-store, no-cache, must-revalidate, proxy-revalidate, max-age=0, s-maxage=0",
    },
    image: (
      <Box 
        grow 
        backgroundColor="bg" 
        flexDirection="column" 
        gap="8"
        paddingTop="48"
        paddingLeft="28"
        paddingRight="28"
        textAlign="left"
        height="100%"
        width="100%"
      >

        <Box backgroundColor="bg" flex="1" >
          <Box
            grow
            backgroundColor="bg"
            flex="1"
            flexDirection="row"
            alignItems="center"
            width="100%"
            overflow="hidden"
            position="relative"
          >
            {/* Image */}
            <img
              width="256"
              height="256"
              src={pfpUrl}
              style={{
                border: "2px solid #DDDDDD",
                borderRadius: "20px",
                objectFit: "cover",
                maxWidth: "100%",
                maxHeight: "100%",
                display: "block",
              }}
            />
            <Spacer size="24" />

            {/* Text Container */}
            <Box
              display="flex"
              flexDirection="column"
              alignItems="flex-start"
              flex="1"
            >
              <Text align="left" weight="500" color="grey" size="24">
                @{username}
              </Text>
              <Spacer size="6" />

              <Text align="left" weight="400" color="black" size="24">
                {truncate(bio, 50) + (Buffer.byteLength(bio, 'utf8') > 50 ? '...' : '')}
              </Text>
              <Spacer size="10" />

              <Box
                display="flex"
                flexDirection="row"
                alignItems="center"
              >
                <Text align="left" weight="500" color="black" size="24">
                  {formatNumber(followers)}
                </Text>
                <Spacer size="6" />
                <Text align="left" color="grey" size="24">
                  Followers
                </Text>
              </Box>
            </Box>
          </Box>
        </Box>

        <Spacer size="60" />

        <Box backgroundColor="bg" flex="1" >
          <Box
            backgroundColor="bg"
            display="flex"
            flexDirection="column"
          >
            <text 
              lang="en"
              style={{
                border: "none",
                color: "black",
                fontSize: "80px",
                fontWeight: "500",
                width: "100%",
                resize: "none",
                outline: "none",
                lineHeight: "0.9"
              }}
            >
              Pay {displayName} // the error because of this but this error will only show if I fetch user `woj.eth`
            </text>

            <Spacer size="10" />

            <text 
              style={{
                border: "none",
                color: "grey",
                fontSize: "52px",
                fontWeight: "400",
                width: "100%",
                resize: "none",
                outline: "none",
              }}
            >
              Pay with any token and they will receive ETH on Base.
            </text>
          </Box>
        </Box>

        <Box backgroundColor="bg" flex="1" > 
        <Box
            borderRadius="14"
            padding="14"
            background="blue"
            height="128"
            width="100%"
            justifyContent="center"
          >
            <Box flexDirection="row" alignItems="center" display="flex">
              <box style={{ transform: "rotate(-68.01deg)" }}>
                <Icon name="undo" color="white" size="60" />
              </box>
              <Spacer size="10" />
              <text 
                style={{
                  border: "none",
                  color: "white",
                  fontSize: "42px",
                  fontWeight: "500",
                  width: "100%",
                  resize: "none",
                  outline: "none",
                }}
              >
                Enter the amount and token you want to send
              </text>
            </Box>
          </Box>
        </Box>
      </Box>
    ),
  });
});

On the displayName text code error will show.

Frog Version

frog@v0.17.1

TypeScript Version

"typescript": "^5.5.3"

Check existing issues

• [X] I checked there isn't already an issue for the bug I encountered.

Anything else?

No response

[dalechyn]

Hey! Appreciate linking the reproducible example.

However, it is really not minimal. I see that I have to pass some environment variables to make it work. Can you cut it out to a really minimal reproducible example?

[github-actions[bot]]

Hello @Mr94t3z.

Please provide a minimal reproduction using StackBlitz, TypeScript Playground (for type issues), or a separate minimal GitHub repository.

Minimal reproductions are required as they save us a lot of time reproducing your config & environment, and trying to reproduce your issue. See Why reproductions are required.

Please reopen this issue when a reproduction is added.