Trans crashes if one of its children is null

[vith]

react-i18next/src/Trans.js

Lines 75 to 77 in 2bd69a2

	} else if (typeof child === 'object') {
	// e.g. lorem {{ value, format }} ipsum
	const { format, ...clone } = child;

typeof null returns 'object', so the Trans component will attempt to extract a field called format from null, which crashes:

Trans.js:70 Uncaught TypeError: Cannot read property 'format' of null
    at Trans.js:70
    at Array.forEach (<anonymous>)
    at nodesToString (Trans.js:49)
    at Trans (Trans.js:234)
    at renderWithHooks (react-dom.development.js:14985)
    at mountIndeterminateComponent (react-dom.development.js:17811)
    at beginWork (react-dom.development.js:19049)
    at HTMLUnknownElement.callCallback (react-dom.development.js:3945)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994)
    at invokeGuardedCallback (react-dom.development.js:4056)
    at beginWork$1 (react-dom.development.js:23964)
    at performUnitOfWork (react-dom.development.js:22776)
    at workLoopSync (react-dom.development.js:22707)
    at renderRootSync (react-dom.development.js:22670)
    at performSyncWorkOnRoot (react-dom.development.js:22293)
    at react-dom.development.js:11327
    at unstable_runWithPriority (scheduler.development.js:646)
    at runWithPriority$1 (react-dom.development.js:11276)
    at flushSyncCallbackQueueImpl (react-dom.development.js:11322)
    at workLoop (scheduler.development.js:590)
    at flushWork (scheduler.development.js:545)
    at MessagePort.performWorkUntilDeadline (scheduler.development.js:157)

version: "react-i18next": "^11.8.13",

[adrai]

Can you please provide a reproducible example?

[jamuhl]

How do you run into a case where you pass null as child to Trans?!? Isn't that code under your control?

[vith]

Can you please provide a reproducible example?

vith@03ba2b5

  <Trans i18nKey="description.part1">
    To get started, edit <code>src/App.js</code> and save to reload. {null}
  </Trans>

How do you run into a case where you pass null as child to Trans?!? Isn't that code under your control?

By taking normal React code and introducing react-i18next to it.

Relevant types from react:

type PropsWithChildren<P> = P & { children?: ReactNode };
type ReactNode = ReactChild | ReactFragment | ReactPortal | boolean | null | undefined;
type ReactFragment = {} | ReactNodeArray;
interface ReactNodeArray extends Array<ReactNode> {}

which means [null] is valid for children in react

[adrai]

should be fixed with v11.8.15