Skip to content
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

Closed
codingyourlife opened this issue Feb 14, 2021 · 5 comments
Labels

Comments

@codingyourlife
Copy link

codingyourlife commented Feb 14, 2021

🐛 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 the t() 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)

error

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 a t() function call.

JS

My Quickfix which works in this case without any drawback:
fix

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

@jamuhl
Copy link
Member

jamuhl commented Feb 15, 2021

Strange one...you might try setting init option react: { defaultTransParent: 'div' } https://github.com/i18next/react-i18next/blob/master/src/Trans.js#L316 -> so instead of a Fragment Trans will render a outer div (or whatever you set it)

@codingyourlife
Copy link
Author

Strange one...you might try setting init option react: { defaultTransParent: 'div' } https://github.com/i18next/react-i18next/blob/master/src/Trans.js#L316 -> so instead of a Fragment Trans will render a outer div (or whatever you set it)

It DOES work with defaultTransParent div but it also messes up the styling because a div is display block.
image

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.

@jamuhl
Copy link
Member

jamuhl commented Feb 16, 2021

You should be able set it to any custom component:

// ....other options
react: {
  defaultTransParent: function MyDiv ({children}) {
    return <div style={{ display: 'inline' }}>{children}</div>
  };
}

@stale
Copy link

stale bot commented Feb 23, 2021

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.

@stale stale bot added the stale label Feb 23, 2021
@codingyourlife
Copy link
Author

I can confirm that this workaround works!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

2 participants