Rework with react-i18next by joshkel · Pull Request #155 · i18next/i18next-cli

joshkel · 2025-12-31T21:14:00Z

I've run into several bugs / inconsistencies between the text extracted by i18next-cli and the text keys generated by react-i18next. I've noticed that the jsx-parser.ts logic in i18next-cli is quite complicated. As @adrai said,

it's not easy to "simulate" what react-i18next / html-parse-stringify is doing with SWC...

This makes me think: Instead of simulating what react-i18next does with SWC, it seems both simpler and more robust to simulate a bit of React with SWC, then invoke react-i18next's logic as is.

This change exposed what appear to be several other bugs within i18next-cli:

i18next-cli extracted line break tags as  , while react-i18next expects  .

In JSX such as

     <Trans i18nKey="children_receive_wrong_second_index">
        First line with empty JSXTextNode{' '}
        <a href="http://www.grafana.com">Span that should have index 2 but has index 0</a>
        Second line
      </Trans>

i18next-cli preserved some whitespace between </a> and Second, but JSX does not.

In JSX such as

      <Trans i18nKey="children_receive_wrong_index">
        First line with empty JSXTextNode
        <p>
          <span>Span that should have index 1 but has index 0</span>
        </p>
        Second line
      </Trans>

i18next-cli preserved the  via transKeepBasicHtmlNodesFor, but react-i18next did not, because its children were too complex.

I've done my best to verify each of these behavior changes but would appreciate a review. (https://codesandbox.io/p/sandbox/react-i18next-ref-sh88qx has a sandbox where I was experimenting with some of these.)

This currently relies on an undocumented react-i18next function, nodesToString. If this approach seems reasonable, I can open a PR to react-i18next to expose the needed interface.

There is one remaining test failure which I have not yet investigated; it looks like a test of internal behavior, which makes me wonder if the test is invalid.

Fixes #148.

Checklist

only relevant code is changed (Merely saving the extractor.Trans.test.ts file in VS Code caused it to strip a bunch of trailing whitespace. I did not attempt to prevent this, but I did keep it in its own commit for easier review. I also made minor fixes to types and spelling.)
run tests npm run test
tests are included
commit message and code follows the Developer's Certification of Origin

socket-security · 2025-12-31T21:14:22Z

Review the following changes in direct dependencies. Learn more about Socket for GitHub.

Diff	Package	Supply Chain Security	Vulnerability	Quality	Maintenance	License
	react@19.2.3
	react-i18next@16.5.1

View full report

adrai · 2025-12-31T22:23:54Z

currently afk, but sounds interesting...

btw: The whitespace in
was wished, since this is still accepted in react-i18next...

In general I would say if i18next-cli generates "better" defaults (and still accepted by react-i18next) it's acceptable imo...

joshkel · 2025-12-31T22:56:50Z

btw: The whitespace in   was wished, since this is still accepted in react-i18next...

You're referring to #101?

If I understand correctly, it's not a question of whether react-i18next accepts   versus  , it's a question of what it generates when it's creating string keys to look up in translations. As far as I can tell, it generates  , not  . So, if i18next-parser extracts keys with  , then that seems like a bug in i18next-parser, because I would not expect those extracted keys to properly translate at runtime.

https://github.com/i18next/react-i18next/blob/v16.5.0/src/TransWithoutContext.js#L74

But my understanding doesn't seem to match what @janplancraft reported in #101. If I'm misunderstanding, please let me know; I'm happy to make whatever corrections are needed.

adrai · 2025-12-31T23:11:24Z

No corrections necessary... if we can say with more confidence that i18next-cli produces the same as react-i18next, I'm totally ok with that.

adrai · 2026-01-01T01:17:09Z

Can you please update your PR with react-i18next v16.5.1 ? => i18next/react-i18next@106eeb7

Fix remaining test failure; consolidate ` ` tests.

joshkel · 2026-01-01T22:13:34Z

Can you please update your PR with react-i18next v16.5.1 ? => i18next/react-i18next@106eeb7

@adrai Done. Thanks!

adrai · 2026-01-01T22:22:53Z

I have to thank you! ;-)

included in v1.34.0

This PR contains the following updates: | Package | Change | [Age](https://docs.renovatebot.com/merge-confidence/) | [Confidence](https://docs.renovatebot.com/merge-confidence/) | |---|---|---|---| | [react-i18next](https://redirect.github.com/i18next/react-i18next) | [`16.5.0` → `16.5.1`](https://renovatebot.com/diffs/npm/react-i18next/16.5.0/16.5.1) | ![age](https://developer.mend.io/api/mc/badges/age/npm/react-i18next/16.5.1?slim=true) | ![confidence](https://developer.mend.io/api/mc/badges/confidence/npm/react-i18next/16.5.0/16.5.1?slim=true) | --- ### Release Notes <details> <summary>i18next/react-i18next (react-i18next)</summary> ### [`v16.5.1`](https://redirect.github.com/i18next/react-i18next/blob/HEAD/CHANGELOG.md#1651) [Compare Source](https://redirect.github.com/i18next/react-i18next/compare/v16.5.0...v16.5.1) - fix: export `nodesToString` (runtime + TypeScript typings) to support `i18next-cli` ([i18next/i18next-cli#155](https://redirect.github.com/i18next/i18next-cli/pull/155)) </details> --- ### Configuration 📅 **Schedule**: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined). 🚦 **Automerge**: Disabled by config. Please merge this manually once you are satisfied. ♻ **Rebasing**: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox. 🔕 **Ignore**: Close this PR and you won't be reminded about this update again. --- - [ ] If you want to rebase/retry this PR, check this box --- This PR was generated by [Mend Renovate](https://mend.io/renovate/). View the [repository job log](https://developer.mend.io/github/authelia/authelia).  Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

joshkel added 3 commits December 31, 2025 15:29

Trim trailing whitespace

5939751

First attempt at reimplementing via react-i18next

86235a7

Fix test failures, mostly finalize

72dcf74

joshkel mentioned this pull request Dec 31, 2025

Inconsistent numbering for type assertions #148

Closed

joshkel added 2 commits January 1, 2026 17:06

Update to new react-i18next with exported nodesToString

657248e

Test updates

2355c4c

Fix remaining test failure; consolidate ` ` tests.

adrai merged commit 91346e1 into i18next:main Jan 1, 2026
2 checks passed

joshkel deleted the rework-with-react-i18next branch January 1, 2026 23:22

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Rework with react-i18next#155

Rework with react-i18next#155
adrai merged 5 commits intoi18next:mainfrom
joshkel:rework-with-react-i18next

joshkel commented Dec 31, 2025

Uh oh!

socket-security bot commented Dec 31, 2025 •

edited

Loading

Uh oh!

adrai commented Dec 31, 2025 •

edited

Loading

Uh oh!

joshkel commented Dec 31, 2025

Uh oh!

adrai commented Dec 31, 2025

Uh oh!

adrai commented Jan 1, 2026

Uh oh!

joshkel commented Jan 1, 2026

Uh oh!

Uh oh!

adrai commented Jan 1, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Conversation

joshkel commented Dec 31, 2025

Checklist

Uh oh!

socket-security bot commented Dec 31, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

adrai commented Dec 31, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

joshkel commented Dec 31, 2025

Uh oh!

adrai commented Dec 31, 2025

Uh oh!

adrai commented Jan 1, 2026

Uh oh!

joshkel commented Jan 1, 2026

Uh oh!

Uh oh!

adrai commented Jan 1, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

socket-security bot commented Dec 31, 2025 •

edited

Loading

adrai commented Dec 31, 2025 •

edited

Loading