fix(i18n): strict mode causing i18n initialized twice

Author: kunish

next.config.js

@@ -3,5 +3,6 @@ module.exports = {
   output: process.env.STANDALONE && 'standalone',
   experimental: { instrumentationHook: true },
   images: { remotePatterns: [{ hostname: 'source.unsplash.com' }] },
-  rewrites: () => [{ source: '/api/wing/:path*', destination: `${process.env.WING_API_URL}/:path*` }]
+  rewrites: () => [{ source: '/api/wing/:path*', destination: `${process.env.WING_API_URL}/:path*` }],
+  reactStrictMode: false
 }

src/app/bootstrap.tsx

@@ -2,24 +2,21 @@
 
 import dayjs from 'dayjs'
 import duration from 'dayjs/plugin/duration'
-import { FC, ReactNode, useState } from 'react'
+import { FC, ReactNode } from 'react'
 import { useAsync } from 'react-use'
 import { LoadingSpinner } from '~/components/LoadingSpinner'
 import { initializeEditor } from '~/editor'
 import { initializeI18n } from '~/i18n'
 
 export const Bootstrap: FC<{ children: ReactNode }> = ({ children }) => {
-  const [loading, setLoading] = useState(true)
-
-  useAsync(async () => {
-    setLoading(true)
-
+  const { loading } = useAsync(async () => {
     dayjs.extend(duration)
-    await initializeI18n()
-    await initializeEditor()
 
-    setLoading(false)
-  })
+    try {
+      await initializeI18n()
+      await initializeEditor()
+    } catch {}
+  }, [])
 
   if (loading) {
     return (

src/i18n/index.ts

@@ -21,9 +21,9 @@ export const resources = {
 } as const
 
 export const initializeI18n = async () => {
-  await i18n.use(detectLanguage).use(initReactI18next).init({
-    lng: LANG.enUS,
+  await i18n.use(initReactI18next).use(detectLanguage).init({
     resources,
+    fallbackLng: LANG.enUS,
     returnNull: false
   })