Cannot read property 'fontsize' of undefined 문의

개발
,
1

TDS를 업데이트를 받고나서 부터
원래는 잘나오던 뱃지 컴포넌트가 에러를 뿜습니다.

text
’cannot read property ‘fontsize’ of undefined’

package.json
{
“name”: “woori-it-mini-app”,
“private”: true,
“scripts”: {
“dev”: “granite dev”,
“build”: “granite build”,
“test”: “jest --passWithNoTests”,
“typecheck”: “tsc --noEmit”
},
“dependencies”: {
“@apps-in-toss/framework”: “^1.1.3”,
“@granite-js/native”: “0.1.21”,
“@granite-js/plugin-env”: “^0.1.22”,
“@granite-js/plugin-router”: “0.1.21”,
“@granite-js/react-native”: “0.1.21”,
“@toss-design-system/react-native”: “^1.2.0”,
“react”: “18.2.0”,
“react-native”: “0.72.6”,
“zustand”: “^5.0.8”
},
“devDependencies”: {
“@babel/core”: “7.23.9”,
“@babel/plugin-proposal-class-properties”: “^7.16.7”,
“@babel/plugin-proposal-nullish-coalescing-operator”: “^7.16.7”,
“@babel/plugin-proposal-numeric-separator”: “^7.16.7”,
“@babel/plugin-proposal-optional-chaining”: “^7.16.7”,
“@babel/plugin-proposal-private-methods”: “^7.18.6”,
“@babel/plugin-proposal-private-property-in-object”: “^7.18.6”,
“@babel/plugin-transform-flow-strip-types”: “^7.19.0”,
“@babel/preset-env”: “^7.15.0”,
“@babel/preset-react”: “^7.16.7”,
“@babel/preset-typescript”: “^7.16.7”,
“@babel/runtime”: “7.18.9”,
“@granite-js/plugin-router”: “0.1.21”,
“@testing-library/react-native”: “^12.9.0”,
“@types/babel__core”: “^7.20.5”,
“@types/jest”: “^29.5.14”,
“@types/node”: “^22.10.2”,
“@types/react”: “18.3.3”,
“jest”: “^29.7.0”,
“react-test-renderer”: “18.2.0”,
“typescript”: “^5.8.3”
},
“packageManager”: “yarn@4.9.2+sha512.1fc009bc09d13cfd0e19efa44cbfc2b9cf6ca61482725eb35bbc5e257e093ebf4130db6dfe15d604ff4b79efd8e1e8e99b25fa7d0a6197c9f9826358d4d65c3c”
}

아래는 CALL STACK입니다.
“use strict”;var __importDefault=function(o){return o&&o.__esModule?o:{default:o}};Object.defineProperty(exports,“__esModule”,{value:!0}),exports.ParagraphBadge=ParagraphBadge;const jsx_runtime_1=require(“react/jsx-runtime”),colors_1=require(“@toss-design-system/colors”),core_1=require(“../../../core”),txt_1=require(“../../txt”),hex_to_rgba_1=__importDefault(require(“hex-to-rgba”)),react_1=require(“react”),react_native_1=require(“react-native”),ParagraphContext_1=require(“../ParagraphContext”),utils_1=require(“../utils”),const_1=require(“./const”);function ParagraphBadge({children:o,type:a=“blue”,badgeStyle:l=“fill”,marginLeft:g=0,marginRight:n=0,typography:d,style:i,fontWeight:u=“semiBold”}){core_1.useColorPreference;const{colorPreference:s}=(0,core_1.useColorPreference)(),{typography:t}=(0,core_1.useTypographyTheme)(),{typography:k}=(0,react_1.useContext)(ParagraphContext_1.ParagraphContext),h=${a}-${l},{backgroundColor:B,color:p}=getBadgeStyleByVariants(h,s),c=d??k,r=(0,react_1.useMemo)(()=>{const{fontSize:e}=t[c];return(0,const_1.isValidFontSize)(e)?{…const_1.badgeStyleMap[e],top:(0,utils_1.get\uBCF4\uC815Top)({targetHeight:const_1.badgeStyleMap[e].lineHeight+const_1.badgeStyleMap[e].paddingVertical2,fontSize:e})}:(console.error(INVALID_FONTSIZE_ERROR),{…const_1.badgeStyleMap[15],top:(0,utils_1.get\uBCF4\uC815Top)({targetHeight:const_1.badgeStyleMap[15].lineHeight+const_1.badgeStyleMap[15].paddingVertical2,fontSize:e})})},[c,t]);return(0,jsx_runtime_1.jsx)(react_native_1.View,{style:[{alignSelf:“flex-start”},i],children:(0,jsx_runtime_1.jsx)(react_native_1.View,{style:{paddingHorizontal:r.paddingHorizontal,paddingVertical:r.paddingVertical,borderRadius:r.borderRadius,backgroundColor:B,marginLeft:g??r.margin,marginRight:n??r.margin,top:r.top},children:(0,jsx_runtime_1.jsx)(txt_1.Txt,{fontWeight:u,color:p,style:{fontSize:r.fontSize,lineHeight:r.lineHeight},children:o})})})}const INVALID_FONTSIZE_ERROR=“ParagraphBadge: fontSize is not valid (11 > fontSize || 56 < fontSize)”,polishedValues={blueBadgeBackgroundLight:(0,hex_to_rgba_1.default)(“#3182f6”,.16),blueBadgeBackgroundDark:(0,hex_to_rgba_1.default)(“#4593fc”,.16),tealBadgeBackgroundLight:(0,hex_to_rgba_1.default)(“#00818a”,.16),tealBadgeBackgroundDark:(0,hex_to_rgba_1.default)(“#269da6”,.16),greenBadgeBackgroundLight:(0,hex_to_rgba_1.default)(“#02a262”,.16),greenBadgeBackgroundDark:(0,hex_to_rgba_1.default)(“#15c47e”,.16),redBadgeBackgroundLight:(0,hex_to_rgba_1.default)(“#f44336”,.16),redBadgeBackgroundDark:(0,hex_to_rgba_1.default)(“#ef5350”,.16),yellowBadgeBackgroundLight:(0,hex_to_rgba_1.default)(“#ffb331”,.16),yellowBadgeBackgroundDark:(0,hex_to_rgba_1.default)(“#ffd158”,.16),elephantBadgeBackgroundLight:(0,hex_to_rgba_1.default)(“#4e5968”,.16),elephantBadgeBackgroundDark:(0,hex_to_rgba_1.default)(“#c3c3c6”,.16)};function getBadgeStyleByVariants(o,a){return{“red-fill”:{light:{backgroundColor:colors_1.colors.red500,color:colors_1.colors.white},dark:{backgroundColor:colors_1.colors.red500,color:colors_1.colors.white}},“red-weak”:{light:{backgroundColor:polishedValues.redBadgeBackgroundLight,color:colors_1.colors.red700},dark:{backgroundColor:polishedValues.redBadgeBackgroundDark,color:colors_1.colors.red400}},“green-fill”:{light:{backgroundColor:colors_1.colors.green600,color:colors_1.colors.white},dark:{backgroundColor:colors_1.colors.green600,color:colors_1.colors.white}},“green-weak”:{light:{backgroundColor:polishedValues.greenBadgeBackgroundLight,color:colors_1.colors.green700},dark:{backgroundColor:polishedValues.greenBadgeBackgroundDark,color:colors_1.colors.green400}},“blue-fill”:{light:{backgroundColor:colors_1.colors.blue500,color:colors_1.colors.white},dark:{backgroundColor:colors_1.colors.blue500,color:colors_1.colors.white}},“blue-weak”:{light:{backgroundColor:polishedValues.blueBadgeBackgroundLight,color:colors_1.colors.blue700},dark:{backgroundColor:polishedValues.blueBadgeBackgroundDark,color:colors_1.colors.blue400}},“yellow-fill”:{light:{backgroundColor:colors_1.colors.yellow500,color:colors_1.colors.grey800},dark:{backgroundColor:colors_1.colors.yellow500,color:colors_1.colors.grey800}},“yellow-weak”:{light:{backgroundColor:polishedValues.yellowBadgeBackgroundLight,color:colors_1.colors.yellow900},dark:{backgroundColor:polishedValues.yellowBadgeBackgroundDark,color:colors_1.colors.yellow700}},“teal-fill”:{light:{backgroundColor:colors_1.colors.teal600,color:colors_1.colors.white},dark:{backgroundColor:colors_1.colors.teal600,color:colors_1.colors.white}},“teal-weak”:{light:{backgroundColor:polishedValues.tealBadgeBackgroundLight,color:colors_1.colors.teal700},dark:{backgroundColor:polishedValues.tealBadgeBackgroundDark,color:colors_1.colors.teal400}},“elephant-fill”:{light:{backgroundColor:colors_1.colors.grey700,color:colors_1.colors.white},dark:{backgroundColor:colors_1.colors.grey700,color:colors_1.colors.white}},“elephant-weak”:{light:{backgroundColor:polishedValues.elephantBadgeBackgroundLight,color:colors_1.colors.grey700},dark:{backgroundColor:polishedValues.elephantBadgeBackgroundDark,color:colors_1.colors.inverseGrey700}}}[o][a]}
*
*

2

안녕하세요 :slight_smile:
뱃지 컴포넌트를 어떻게 사용중이신지 알 수 있을까요 ?
<Badge size='large'>배지 테스트</Badge> 로 테스트 해봤을때 잘 동작하였습니다 :man_bowing:

3 
import { Badge } from "@toss-design-system/react-native";
import { StyleSheet, View } from "react-native";

<Badge size="small" type="elephant" badgeStyle="fill">new</Badge>

이렇게 사용하고 있습니다.

https://tossmini-docs.toss.im/tds-react-native/components/badge/

4

아에 새로 스캐폴딩부터 해서 처음부터 세팅했습니다.

import { ListHeader } from '@toss-design-system/react-native';
<ListHeader
        upper={<ListHeader.DescriptionParagraph>보조설명 내용</ListHeader.DescriptionParagraph>}
        title={
          <ListHeader.TitleParagraph typography="t5" fontWeight="bold">
            타이틀 내용
          </ListHeader.TitleParagraph>
        }
        right={
          <ListHeader.RightText typography="t7">
            악세사리
          </ListHeader.RightText>
        }
      />

첫페이지에 해당 코드 작성하면 ’cannot read property ‘fontsize’ of undefined’ 동일한 에러가 나오고 있습니다.

5

저도 같은 상황입니다.

  "dependencies": {
    "@apps-in-toss/framework": "^1.1.3",
    "@granite-js/native": "0.1.21",
    "@granite-js/plugin-router": "0.1.21",
    "@granite-js/react-native": "0.1.21",
    "@toss-design-system/react-native": "^1.2.0",
    "react": "18.2.0",
    "react-native": "0.72.6"
  },

이고, ios는 문제가 없는데, 안드로이드에서 타이포와 관련된 문제가 있습니다.

<ListRow.Texts>가 top 속성에 텍스트를 적어 넣으면 안드로이드는 cannot read property ‘fontsize’ of undefined’로 터져버리고, Text 태그로 바꾸어도 ios와 달리 타이포 속성이 먹질 않는 문제가 있습니다.

<Text typography='t7' fontWeight='regular' color={colors.grey700}>
  텍스트
</Text>

color, fontWeight는 적용되는데, typography가 적용되지 않습니다.

6

‘cannot read property ‘fontsize’ of undefined’ 에러는 안드로이드에서 발생하는 것 확인하였고, 조치하여 배포될 예정입니다. 조금만 기다려주세요 :man_bowing:

1개의 좋아요
7

안녕하세요 :slight_smile:
이슈 해결되어 공유드려요.
@toss-design-system/react-native를 1.2.1 버전으로 업데이트 부탁드려요.

1개의 좋아요
8

넵 감사합니다. 고생하셧습니다.

1개의 좋아요