if (components) {
Object.keys(components).forEach((c) => {
const comp = components[c];
if (
typeof comp.type === 'function' ||
!comp.props ||
!comp.props.children ||
(translation.indexOf(`${c}/>`) < 0 && translation.indexOf(`${c} />`) < 0)
)
return;
// eslint-disable-next-line react/no-unstable-nested-components, no-inner-declarations
function Componentized() {
// <>{comp}</>
return createElement(Fragment, null, comp);
}
// <Componentized />
components[c] = createElement(Componentized);
// ^ `components` may be frozen and then crash happens
});
}
Looks like Trans was going to modify the input prop components inplace. However, this may lead a crash while the components is readonly, aka frozen.
I encounter this issue by accidentally storing a React component with Trans by using useImmer hook. The useImmer hook will freeze all the states in production environment by default.
For exmaple:
const MyComponent = () => {
// The components props will be frozen in production environment
const [Inner, setInner] = useImmer(<>
<Trans components={components}></Trans>
</>)
return <Inner/>;
}
So instead of using forEach to convert the input components may be it would be better to use map to create a new variable for later use.
I've got an issue around this line in
TransWithoutContext.js
:https://github.com/i18next/react-i18next/blob/b274be772bde64377ce1d75f28c7cd3f46735851/src/TransWithoutContext.js#L380
Looks like
Trans
was going to modify the input propcomponents
inplace. However, this may lead a crash while thecomponents
isreadonly
, akafrozen
.I encounter this issue by accidentally storing a React component with Trans by using
useImmer
hook. TheuseImmer
hook will freeze all the states in production environment by default.For exmaple:
So instead of using
forEach
to convert the inputcomponents
may be it would be better to usemap
to create a new variable for later use.