2017-07-16 20:19:45 +00:00
|
|
|
{
|
|
|
|
|
"name": "react-i18next-nextjs-example",
|
|
|
|
|
"version": "1.0.0",
|
|
|
|
|
"description": "",
|
|
|
|
|
"main": "server.js",
|
|
|
|
|
"scripts": {
|
|
|
|
|
"dev": "node server.js",
|
|
|
|
|
"build": "next build",
|
|
|
|
|
"start": "NODE_ENV=production node server.js"
|
|
|
|
|
},
|
|
|
|
|
"author": "",
|
|
|
|
|
"license": "MIT",
|
|
|
|
|
"dependencies": {
|
2018-08-24 07:49:10 +00:00
|
|
|
"express": "4.16.3",
|
2018-09-27 11:49:33 +00:00
|
|
|
"i18next": "11.9.0",
|
|
|
|
|
"i18next-browser-languagedetector": "2.2.3",
|
|
|
|
|
"i18next-express-middleware": "1.4.0",
|
|
|
|
|
"i18next-node-fs-backend": "2.1.0",
|
2018-02-18 11:41:40 +00:00
|
|
|
"i18next-xhr-backend": "1.5.1",
|
2018-09-27 11:49:33 +00:00
|
|
|
"next": "latest",
|
|
|
|
|
"react": "^16.5.2",
|
|
|
|
|
"react-dom": "^16.5.2",
|
Update with-react-i18next example to use react-i18next@8.0.6 (#5368)
Fixes #5352 . This updates the example updating react-i18next to v8.0.6, replacing the `translate` HOC to `withNamespaces` and `I18n` to `NamespacesConsumer`.
There is one thing that I am not sure if is correct or not so I need some guidance. You gotta wrap the page with the `withI18next` HOC so it will extend the `getInitialProps` of the page with this:
```
Extended.getInitialProps = async (ctx) => {
const composedInitialProps = ComposedComponent.getInitialProps
? await ComposedComponent.getInitialProps(ctx)
: {}
const i18nInitialProps = ctx.req
? i18n.getInitialProps(ctx.req, namespaces)
: {}
return {
...composedInitialProps,
...i18nInitialProps
}
}
```
The problem lies in `i18n.getInitialProps` that has this code:
```
i18n.getInitialProps = (req, namespaces) => {
if (!namespaces) namespaces = i18n.options.defaultNS
if (typeof namespaces === 'string') namespaces = [namespaces]
req.i18n.toJSON = () => null // do not serialize i18next instance and send to client
const initialI18nStore = {}
req.i18n.languages.forEach((l) => {
initialI18nStore[l] = {}
namespaces.forEach((ns) => {
initialI18nStore[l][ns] = (req.i18n.services.resourceStore.data[l] || {})[ns] || {}
})
})
return {
i18n: req.i18n, // use the instance on req - fixed language on request (avoid issues in race conditions with lngs of different users)
initialI18nStore,
initialLanguage: req.i18n.language
}
}
```
In my understanding, among other things, it gets the `i18n` object from the request (included by the `server.js`) and uses the data to create `initialI18nStore` and `initialLanguage`, and then return these two objects plus the `i18n` object itself. If you add the `i18n` object on the return, then there will be a crash on the client-side render of the page:
```TypeError: Cannot read property 'ready' of null```
I don't know why, but returning it breaks `NamespacesConsumer` component from `react-i18next` (the state becomes null). So I commented this line and the provider on `_app.js` is getting the `i18n` instance from the `i18n.js` file (the same as `server.js`). I don't know if this would be an issue so I would like help to debug this.
2018-10-11 14:20:01 +00:00
|
|
|
"react-i18next": "8.0.6"
|
2017-07-16 20:19:45 +00:00
|
|
|
}
|
|
|
|
|
}
|