Content showing twice using Inertia SSR with hydrateRoot and laravel-react-i18n

[TheCoati]

When using laravel-react-i18n with Inertia SSR, the page is rendered twice using hydrateRoot.

ssr.tsx

void createServer(page => createInertiaApp({
    page,
    render: ReactDOMServer.renderToString,
    resolve: name => {
        const pages = import.meta.glob('./pages/**/*.tsx', { eager: true })
        return pages[`./pages/${name}.tsx`]
    },
    setup: ({App, props}) => {
        return (
            <LaravelReactI18nProvider
                    locale={'en'}
                    fallbackLocale={'en'}
                    files={import.meta.glob('/lang/*.json', { eager: true })}>
                <App {...props} />
            </LaravelReactI18nProvider>
        )
    }
}))

app.tsx

void createInertiaApp({
    resolve: name => {
        const pages = import.meta.glob('./pages/**/*.tsx', { eager: true })
        return pages[`./pages/${name}.tsx`]
    },
    setup({ el, App, props }) {
        hydrateRoot(el, <LaravelReactI18nProvider
                locale={'en'}
                fallbackLocale={'en'}
                files={import.meta.glob('/lang/*.json')}>
            <App {...props} />
        </LaravelReactI18nProvider>)
    },
})

home.tsx

export default function HomePage(): ReactElement {
    return (
        <div>
            Test
        </div>
    )
}

Restults in:

---

After removing the <LaravelReactI18nProvider>, the text Test correctly renders only once, as intended.

[saullo]

Any ideias? Same issue here

[wescopeland]

I resorted to forking the project to resolve this issue.

The bug is in provider.ts. If you want to fix your own project, copy the changes in this file: https://github.com/RetroAchievements/RAWeb/pull/2723/files/b9644c05d1f193032d15f37277b1d88535047e50#diff-f7d458b3d1d0014c6c7114fd9fe84f22424ecd60dca8404f506ad0bc218c6ad7

[EugeneMeles]

fixed at 2.0.5