Split exports in with-react-18next example to avoid ambiguity (#3959)

See context in https://github.com/i18next/react-i18next/issues/397

examples/with-react-i18next/i18n.js

-const i18n = require('i18next')
+const i18next = require('i18next')
 const XHR = require('i18next-xhr-backend')
 const LanguageDetector = require('i18next-browser-languagedetector')
 
@@ -23,20 +23,22 @@ const options = {
   }
 }
 
+const i18nInstance = i18next
+
 // for browser use xhr backend to load translations and browser lng detector
 if (process.browser) {
-  i18n
+  i18nInstance
     .use(XHR)
     // .use(Cache)
     .use(LanguageDetector)
 }
 
 // initialize if not already initialized
-if (!i18n.isInitialized) i18n.init(options)
+if (!i18nInstance.isInitialized) i18nInstance.init(options)
 
 // a simple helper to getInitialProps passed on loaded i18n data
-i18n.getInitialProps = (req, namespaces) => {
-  if (!namespaces) namespaces = i18n.options.defaultNS
+const getInitialProps = (req, namespaces) => {
+  if (!namespaces) namespaces = i18nInstance.options.defaultNS
   if (typeof namespaces === 'string') namespaces = [namespaces]
 
   req.i18n.toJSON = () => null // do not serialize i18next instance and send to client
@@ -56,4 +58,8 @@ i18n.getInitialProps = (req, namespaces) => {
   }
 }
 
-module.exports = i18n
+module.exports = {
+  getInitialProps,
+  i18nInstance,
+  I18n: i18next.default
+}

examples/with-react-i18next/lib/withI18next.js

 import { translate } from 'react-i18next'
-import i18n from '../i18n'
+import { getInitialProps, I18n } from '../i18n'
 
 export const withI18next = (namespaces = ['common']) => ComposedComponent => {
-  const Extended = translate(namespaces, { i18n, wait: process.browser })(
+  const Extended = translate(namespaces, { i18n: I18n, wait: process.browser })(
     ComposedComponent
   )
 
@@ -12,7 +12,7 @@ export const withI18next = (namespaces = ['common']) => ComposedComponent => {
       : {}
 
     const i18nInitialProps =
-      ctx.req && !process.browser ? i18n.getInitialProps(ctx.req, namespaces) : {}
+      ctx.req && !process.browser ? getInitialProps(ctx.req, namespaces) : {}
 
     return {
       ...composedInitialProps,

examples/with-react-i18next/server.js

@@ -8,11 +8,11 @@ const handle = app.getRequestHandler()
 
 const i18nextMiddleware = require('i18next-express-middleware')
 const Backend = require('i18next-node-fs-backend')
-const i18n = require('./i18n')
+const { i18nInstance } = require('./i18n')
 
 // init i18next with serverside settings
 // using i18next-express-middleware
-i18n
+i18nInstance
   .use(Backend)
   .use(i18nextMiddleware.LanguageDetector)
   .init({
@@ -30,13 +30,13 @@ i18n
         const server = express()
 
         // enable middleware for i18next
-        server.use(i18nextMiddleware.handle(i18n))
+        server.use(i18nextMiddleware.handle(i18nInstance))
 
         // serve locales for client
         server.use('/locales', express.static(path.join(__dirname, '/locales')))
 
         // missing keys
-        server.post('/locales/add/:lng/:ns', i18nextMiddleware.missingKeyHandler(i18n))
+        server.post('/locales/add/:lng/:ns', i18nextMiddleware.missingKeyHandler(i18nInstance))
 
         // use next.js
         server.get('*', (req, res) => handle(req, res))