Fluent.js usage example for SSR (server-side rendering) on Next.js and other React based frameworks

[MurzNN]

I want to use the Fluent.js library inside a Next.js application on the server-side rendered components, not only on the React frontend client-side components.

This support is introduced in the PR #233 and documented here: https://github.com/projectfluent/fluent.js/wiki/React-Overlays#custom-markup-parsers

But I still can't make this work well - maybe something got changed from that time.

So, could you please provide a working example of the Fluent i18n integration with Next.js that works on the server side? Thanks!

[MurzNN]

Here is an example of the error, when I am trying to do the same as in the documentation:

 ⨯ TypeError: (0 , react__WEBPACK_IMPORTED_MODULE_0__.createContext) is not a function
    at __webpack_require__ (.next/server/webpack-runtime.js:33:43)
    at __webpack_require__ (.next/server/webpack-runtime.js:33:43)
    at __webpack_require__ (.next/server/webpack-runtime.js:33:43)
    at eval (webpack-internal:///(rsc)/./src/app/(frontend)/layout.tsx:22:72)
    at __webpack_require__.a (.next/server/webpack-runtime.js:100:13)
    at eval (webpack-internal:///(rsc)/./src/app/(frontend)/layout.tsx:1:21)
    at <unknown> (rsc)/./src/app/(frontend)/layout.tsx (/var/www/html/.next/server/app/(frontend)/page.js:63:1)
    at Function.__webpack_require__ (.next/server/webpack-runtime.js:33:43) {
  page: '/'
}
 GET / 500 in 828ms

[eemeli]

You appear to be hitting this problem: https://nextjs.org/docs/messages/context-in-server-component

Unfortunately I'm not aware of a current SSR use of fluent.js internally at Mozilla, and I haven't worked with Next.js for quite a few years now, so I'm not sure how to help further on this.

[MurzNN]

Yes, the problem is exactly with the dependency on the client-side component, which I'm trying to resolve, to get translations on the backend. So, maybe the author of that feature, @stasm can help with resolving the issue?

[MurzNN]

Also, found a project https://github.com/devgioele/next-fluent that have a working example, but it is pretty outdated - will try to reuse the approach from there too.

[vito-torrentino]

Does Fluent even require a custom html parser on server in modern react?
Surely with all the server render support something can be done the React Way™.
Although, looking at a similar component in react-i18next, it uses html-parse-stringify, but at least it works on server.