refactor: Enable TypeScript strict mode (#1007)

* refactor: Enable TypeScript strict mode

* refactor: Fix i18n === null case

* refactor: Fix tests

package.json

@@ -72,6 +72,7 @@
     "@babel/preset-react": "^7.10.4",
     "@babel/preset-typescript": "^7.10.4",
     "@testing-library/react": "^11.2.5",
+    "@types/i18next-fs-backend": "^1.0.0",
     "@types/jest": "^24.0.16",
     "@types/node": "^14.14.19",
     "@types/react": "^16.8.4",
@@ -101,6 +102,7 @@
     "typescript": "^4.1.3"
   },
   "dependencies": {
+    "@types/hoist-non-react-statics": "^3.3.1",
     "core-js": "^3",
     "hoist-non-react-statics": "^3.2.0",
     "i18next": "^19.8.4",

src/appWithTranslation.client.test.tsx

@@ -10,7 +10,7 @@ jest.mock('fs', () => ({
   readdirSync: jest.fn(),
 }))
 
-const DummyI18nextProvider = ({ children }) => (
+const DummyI18nextProvider: React.FC = ({ children }) => (
   <>{children}</>
 )
 
@@ -30,9 +30,14 @@ const renderComponent = () =>
       pageProps={{
         _nextI18Next: {
           initialLocale: 'en',
-          userConfig: {},
+          userConfig: {
+            i18n: {
+              defaultLocale: 'en',
+              locales: ['en', 'de'],
+            },
+          },
         },
-      }}
+      } as any}
     />
   )
 
@@ -54,14 +59,18 @@ describe('appWithTranslation', () => {
       <div>Hello world</div>
     ), {
       configOverride: 'custom-value',
+      i18n: {
+        defaultLocale: 'en',
+        locales: ['en', 'de'],
+      },
     } as any)
     render(
       <DummyAppConfigOverride
         pageProps={{
           _nextI18Next: {
             initialLocale: 'en',
           },
-        }}
+        } as any}
       />
     )
     const [args] = (I18nextProvider as jest.Mock).mock.calls
@@ -82,7 +91,7 @@ describe('appWithTranslation', () => {
               initialLocale: 'en',
               userConfig: null,
             },
-          }}
+          } as any}
         />
       )
     ).toThrow('appWithTranslation was called without a next-i18next config')

src/appWithTranslation.server.test.tsx

@@ -14,7 +14,7 @@ jest.mock('fs', () => ({
   readdirSync: jest.fn(),
 }))
 
-const DummyI18nextProvider = ({ children }) => (
+const DummyI18nextProvider: React.FC = ({ children }) => (
   <>{children}</>
 )
 
@@ -34,8 +34,14 @@ const renderComponent = () =>
       pageProps={{
         _nextI18Next: {
           initialLocale: 'en',
+          userConfig: {
+            i18n: {
+              defaultLocale: 'en',
+              locales: ['en', 'fr'],
+            },
+          },
         },
-      }}
+      } as any}
     />,
   )
 

src/appWithTranslation.tsx

@@ -13,11 +13,10 @@ type AppProps = {
   pageProps: SSRConfig
 }
 
-export const appWithTranslation = <P extends Record<string, unknown>>(
-  WrappedComponent: React.ComponentType | React.ElementType,
-  configOverride: UserConfig = null,
-):
-  React.ComponentType<P> | React.ElementType<P> => {
+export const appWithTranslation = (
+  WrappedComponent: React.ComponentType<AppProps> | React.ElementType<AppProps>,
+  configOverride: UserConfig | null = null,
+) => {
   const AppWithTranslation = (props: AppProps) => {
     let i18n = null
     let locale = null
@@ -34,6 +33,10 @@ export const appWithTranslation = <P extends Record<string, unknown>>(
         userConfig = configOverride
       }
 
+      if (!userConfig?.i18n) {
+        throw new Error('appWithTranslation was called without config.i18n')
+      }
+
       locale = initialLocale;
 
       ({ i18n } = createClient({
@@ -46,17 +49,27 @@ export const appWithTranslation = <P extends Record<string, unknown>>(
       }))
     }
 
-    return (
-      <I18nextProvider
-        i18n={i18n}
-      >
-        <WrappedComponent
-          key={locale}
-          {...props}
-        />
-      </I18nextProvider>
+    return i18n !== null ? (
+      (
+        <I18nextProvider
+          i18n={i18n}
+        >
+          <WrappedComponent
+            key={locale}
+            {...props}
+          />
+        </I18nextProvider>
+      )
+    ) : (
+      <WrappedComponent
+        key={locale}
+        {...props}
+      />
     )
   }
 
-  return hoistNonReactStatics(AppWithTranslation, WrappedComponent)
+  return hoistNonReactStatics(
+    AppWithTranslation,
+    WrappedComponent,
+  )
 }

src/config/createConfig.test.ts

@@ -14,7 +14,7 @@ describe('createConfig', () => {
   describe('server side', () => {
     beforeAll(() => {
       Object.assign(process, { browser: false })
-      delete global.window
+      delete (global as any).window
     })
 
     describe('when filesystem is as expected', () => {
@@ -106,7 +106,7 @@ describe('createConfig', () => {
 
         const config = createConfig.bind(null, {
           lng: 'en',
-        })
+        } as any)
 
         expect(config).toThrow('Default namespace not found at public/locales/en/common.json')
       })

src/config/createConfig.ts

@@ -1,7 +1,7 @@
 import { defaultConfig } from './defaultConfig'
 import { InternalConfig, UserConfig } from '../../types'
 
-const deepMergeObjects = ['backend', 'detection']
+const deepMergeObjects = ['backend', 'detection'] as (keyof Pick<UserConfig, 'backend' | 'detection'>)[]
 
 export const createConfig = (userConfig: UserConfig): InternalConfig => {
   if (typeof userConfig?.lng !== 'string') {
@@ -55,7 +55,7 @@ export const createConfig = (userConfig: UserConfig): InternalConfig => {
       // Validate defaultNS
       // https://github.com/isaachinman/next-i18next/issues/358
       //
-      if (typeof defaultNS === 'string') {
+      if (typeof defaultNS === 'string' && typeof lng !== 'undefined') {
         const defaultLocaleStructure = localeStructure.replace('{{lng}}', lng).replace('{{ns}}', defaultNS)
         const defaultFile = `/${defaultLocaleStructure}.${localeExtension}`
         const defaultNSPath = path.join(localePath, defaultFile)
@@ -77,7 +77,10 @@ export const createConfig = (userConfig: UserConfig): InternalConfig => {
       // Set server side preload (namespaces)
       //
       if (!combinedConfig.ns) {
-        const getAllNamespaces = p => fs.readdirSync(p).map(file => file.replace(`.${localeExtension}`, ''))
+        const getAllNamespaces = (p: string) =>
+          fs.readdirSync(p).map(
+            (file: string) => file.replace(`.${localeExtension}`, '')
+          )
         combinedConfig.ns = getAllNamespaces(path.resolve(process.cwd(), `${serverLocalePath}/${lng}`))
       }
     }
@@ -109,7 +112,6 @@ export const createConfig = (userConfig: UserConfig): InternalConfig => {
   deepMergeObjects.forEach((obj) => {
     if (userConfig[obj]) {
       combinedConfig[obj] = {
-        ...defaultConfig[obj],
         ...combinedConfig[obj],
         ...userConfig[obj],
       }

src/createClient/browser.test.ts

@@ -1,11 +1,10 @@
-import { InternalConfig } from '../../types'
 import createClientBrowser from './browser'
 
 const config = {
   defaultLocale: 'en',
   locales: ['en', 'de'],
   use: [],
-} as InternalConfig
+} as any
 
 describe('createClientBrowser', () => {
   it('returns a browser client', () => {

src/createClient/browser.ts

@@ -7,8 +7,10 @@ export default (config: InternalConfig): CreateClientReturn => {
   let initPromise: InitPromise
 
   if (!instance.isInitialized) {
-    config.use.forEach(x => instance.use(x))
+    config?.use?.forEach(x => instance.use(x))
     initPromise = instance.init(config)
+  } else {
+    initPromise = Promise.resolve(i18n.t)
   }
 
   return { i18n: instance, initPromise }

src/createClient/node.test.ts

@@ -1,11 +1,10 @@
-import { InternalConfig } from '../../types'
 import createClientNode from './node'
 
 const config = {
   defaultLocale: 'en',
   locales: ['en', 'de'],
   use: [],
-} as InternalConfig
+} as any
 
 describe('createClientBrowser', () => {
   it('returns a node client', () => {

src/createClient/node.ts

@@ -1,5 +1,5 @@
 import i18n from 'i18next'
-import i18nextFSBackend from 'i18next-fs-backend/cjs'
+import i18nextFSBackend from 'i18next-fs-backend'
 
 import { InternalConfig, CreateClientReturn, InitPromise } from '../../types'
 
@@ -13,8 +13,11 @@ export default (config: InternalConfig): CreateClientReturn => {
       instance.use(i18nextFSBackend)
     }
 
-    config.use.forEach(x => instance.use(x))
+    config?.use?.forEach(x => instance.use(x))
     initPromise = instance.init(config)
+  } else {
+    initPromise = Promise.resolve(i18n.t)
   }
+
   return { i18n: instance, initPromise }
 }

src/serverSideTranslations.test.ts

@@ -16,7 +16,7 @@ describe('serverSideTranslations', () => {
   afterEach(jest.resetAllMocks)
 
   it('throws if initialLocale is not passed', async () => {
-    await expect(serverSideTranslations(undefined))
+    await expect(serverSideTranslations(undefined as any))
       .rejects
       .toThrow('Initial locale argument was not passed into serverSideTranslations')
   })
@@ -36,15 +36,25 @@ describe('serverSideTranslations', () => {
   })
 
   it('returns props', async () => {
-    const props = await serverSideTranslations('en')
+    const props = await serverSideTranslations('en-US', [], {
+      i18n: {
+        defaultLocale: 'en-US',
+        locales: ['en-US', 'fr-CA'],
+      },
+    } as UserConfig)
 
     expect(props).toEqual({
       _nextI18Next: {
         initialI18nStore: {
-          en: {},
+          'en-US': {},
+        },
+        initialLocale: 'en-US',
+        userConfig: {
+          i18n: {
+            defaultLocale: 'en-US',
+            locales: ['en-US', 'fr-CA'],
+          },
         },
-        initialLocale: 'en',
-        userConfig: null,
       },
     })
   })

src/serverSideTranslations.ts

@@ -11,7 +11,7 @@ const DEFAULT_CONFIG_PATH = './next-i18next.config.js'
 export const serverSideTranslations = async (
   initialLocale: string,
   namespacesRequired: string[] = [],
-  configOverride: UserConfig = null,
+  configOverride: UserConfig | null = null,
 ): Promise<SSRConfig> => {
   if (typeof initialLocale !== 'string') {
     throw new Error('Initial locale argument was not passed into serverSideTranslations')
@@ -23,6 +23,10 @@ export const serverSideTranslations = async (
     userConfig = await import(path.resolve(DEFAULT_CONFIG_PATH))
   }
 
+  if (userConfig === null) {
+    throw new Error('next-i18next was unable to find a user config')
+  }
+
   const config = createConfig({
     ...userConfig,
     lng: initialLocale,
@@ -41,7 +45,7 @@ export const serverSideTranslations = async (
 
   await initPromise
 
-  const initialI18nStore = {
+  const initialI18nStore: Record<string, any> = {
     [initialLocale]: {},
   }
 

tsconfig.json

@@ -2,6 +2,7 @@
   "compilerOptions": {
     "esModuleInterop": true,
     "noEmit": true,
+    "strict": true,
     "skipLibCheck": true,
     "lib": ["esnext", "dom"],
     "target": "es5",

types.d.ts

@@ -19,7 +19,7 @@ export type UserConfig = {
   localeExtension?: string
   localePath?: string
   localeStructure?: string
-  serializeConfig: boolean
+  serializeConfig?: boolean
   strictMode?: boolean
   use?: any[]
 } & InitOptions
@@ -50,7 +50,7 @@ export type SSRConfig = {
   _nextI18Next: {
     initialI18nStore: any
     initialLocale: string
-    userConfig: UserConfig
+    userConfig: UserConfig | null
   }
 }