JSX.Element causes app crash at start: Uncaught TypeError: Cannot assign to read only property key of object '#Object''

[timobaehr]

If I (1) place a JSX.Element instead of a string for a language item and (2) the browser language is set to the second language of the dictionary (here en), the React app is unable to start. If the language is set to the first language specified in the dictionary, the JSX.Element is succesfully shown.

key 'gutterBottom' not found in localizedStrings for language en
key 'noWrap' not found in localizedStrings for language en
key 'paragraph' not found in localizedStrings for language en
Uncaught TypeError: Cannot assign to read only property key of object '#Object''

The problematic code:

de: {
  helloWorld: <Typography style={styles.fontStyleText}>
      Hallo <i>Welt</i>
  </Typography>,
},
en: {
  helloWorld: <Typography style={styles.fontStyleText}>
      Hello <i>World</i>
  </Typography>,
}

If I change this line to simple string App is able to start:

en: {
  helloWorld: 'Hello <i>World</i>'
},

[jurcaua]

I'm also having this issue. Has this ever been addressed?

[AubreyF]

I just encountered this issue as well. Was able to temporarily workaround using dangerouslySetInnerHTML.

[damitsu]

In case anybody is still having this issue, I just solved it by making the value a function instead of putting the JSX chunk directly for the string property.

Hope this helps!

en: {
  helloWorld: () => <Typography style={styles.fontStyleText}>
      Hello <i>World</i>
  </Typography>,
}

[mgoldenbe]

In case anybody is still having this issue, I just solved it by making the value a function instead of putting the JSX chunk directly for the string property.

Hope this helps!

en: {
  helloWorld: () => <Typography style={styles.fontStyleText}>
      Hello <i>World</i>
  </Typography>,
}

Not working for me:

export const strings = new LocalizedStrings({
 English: {
   price: () => <div>price</div>,
 },
 Hebrew: {
   price: () => <div>מחיר</div>,
 }
});