-
-
Notifications
You must be signed in to change notification settings - Fork 1k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
TransOver Chrome Extension is crashing my page with <Trans/> but not with t() #1254
Comments
Strange one...you might try setting init option |
It DOES work with defaultTransParent div but it also messes up the styling because a div is display block. It does NOT work with defaultTransParent span interestingly. It DOES work when I use i for italic or b for bold. If there is a way to say defaultTransParent div but display inline without setting it to a span there would be a workaround. I was surprised that span isn't working I thought internally it's an empty element. |
You should be able set it to any custom component: // ....other options
react: {
defaultTransParent: function MyDiv ({children}) {
return <div style={{ display: 'inline' }}>{children}</div>
};
} |
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions. |
I can confirm that this workaround works! |
🐛 Bug Report
Our registration page was crashing for some users. I found an open Github issue on facebook/react and could reproduce it reliably. I could solve it by changing a
<Trans />
component to a call of thet()
function. That's why I also report it here. Maybe you guys could add a quickfix until this is solved in react itself (open since november 2019)To Reproduce
There is a well documented Github issue facebook/react#17256 with a codesandbox. You need to use Chrome with TransOver extension added and enabled. For my issue with react-i18next I've set it to translate into "Italian" when I "point at word". You need to wait for the popup to open and then click on our custom Checkbox. I don't have any empty react elements to solve the issue as mentioned as workaround in the Github issue but I could solve it by changing from a
<Trans />
child component to at()
function call.JS
My Quickfix which works in this case without any drawback:
Expected behavior
Clicking my accept marketing emails checkbox should not lead to an empty page because of react-i18next
<Trans>
component being used.Your Environment
browser: Chrome Version 88.0.4324.150 (64-Bit)
node: v14.15.3
os: Windows 10
i18next version: ^11.8.6
The text was updated successfully, but these errors were encountered: