staticData makes the page compilation fail in Next.js

[baptisteArno]

I followed the guide for Next.js implementation: https://tolgee.io/js-sdk/integrations/react/ssr/next

But as soon as I add staticData in the init function, the page compilation fails (as if it were stuck in an infinite loop).

Are you able to reproduce?

tolgee.ts:

import { DevTools, Tolgee } from '@tolgee/react'
import { FormatIcu } from '@tolgee/format-icu'
import { env } from '@typebot.io/env'
import en from '../locales/en.json'

export const tolgee = Tolgee().use(DevTools()).use(FormatIcu()).init({
  defaultLanguage: 'en',
  apiKey: env.NEXT_PUBLIC_TOLGEE_API_KEY,
  apiUrl: env.NEXT_PUBLIC_TOLGEE_API_URL,
  staticData: {
    en
  }
})

_app.tsx:

import { TolgeeProvider, useTolgeeSSR } from '@tolgee/react'
import { tolgee } from '@/lib/tolgee'

const App = ({ Component, pageProps }: AppProps) => {
  const router = useRouter()
  const ssrTolgee = useTolgeeSSR(tolgee, router.locale)

  return (
      <TolgeeProvider tolgee={ssrTolgee}>
                  <Component {...pageProps} />
      </TolgeeProvider>
  )
}

export default trpc.withTRPC(App)

[baptisteArno]

For info I'm using the latest version of next and tolgee

[stepan662]

I'll try to reproduce

[stepan662]

I've tried to replicate your issue in this branch, but no luck 🙁

https://github.com/tolgee/next-example/tree/stepangranat/baptistearno-replication

Would you be able to alter the example, so it gives the same error, or provide your own full example?

[baptisteArno]

Ok, so I ultimately solve the freeze error without really knowing how. But maybe this is related to the new issue I managed to trigger on the replication. It is happening when the application has Chakra UI components (most likely related to emotion) + tolgee with staticData:

NotFoundError: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node.

Here is the reproduction: https://github.com/baptisteArno/next-example/tree/stepangranat/baptistearno-replication

You need to navigate to /test to see the error.

[stepan662]

Yeah it looks like some sort of bug. I'll dig into it.

[stepan662]

It seems like chakra had problem with Tolgee dev tools, which is inserting extra element into body to display in-context dialog. I've prepared a fix, where we insert dev tools lazily and not on first render.

It fixed the error in your example.

[stepan662]

Not sure if this was connected to the infinite loop you got, but I guess it's possible.