reconfigure i18next

apps/app/config/next-i18next.config.js

@@ -1,12 +1,14 @@
+const isDev = process.env.NODE_ENV === 'development';
+
 const path = require('path');
 
 const { AllLang, Lang } = require('@growi/core');
 const { isServer } = require('@growi/core/dist/utils');
-const I18nextChainedBackend = require('i18next-chained-backend').default;
-const I18NextHttpBackend = require('i18next-http-backend');
+const I18nextChainedBackend = isDev ? require('i18next-chained-backend').default : undefined;
+const I18NextHttpBackend = require('i18next-http-backend').default;
 const I18NextLocalStorageBackend = require('i18next-localstorage-backend').default;
 
-const isDev = process.env.NODE_ENV === 'development';
+const HMRPlugin = isDev ? require('i18next-hmr/plugin').HMRPlugin : undefined;
 
 module.exports = {
   defaultLang: Lang.en_US,
@@ -17,7 +19,12 @@ module.exports = {
   defaultNS: 'translation',
   localePath: path.resolve('./public/static/locales'),
   serializeConfig: false,
-  use: isServer() ? [] : [I18nextChainedBackend],
+  // eslint-disable-next-line no-nested-ternary
+  use: isDev
+    ? isServer()
+      ? [new HMRPlugin({ webpack: { server: true } })]
+      : [I18nextChainedBackend, new HMRPlugin({ webpack: { client: true } })]
+    : [],
   backend: {
     backends: isServer() ? [] : [I18NextLocalStorageBackend, I18NextHttpBackend],
     backendOptions: [

apps/app/next.config.js

@@ -120,7 +120,7 @@ module.exports = async(phase, { defaultConfig }) => {
 
       // setup i18next-hmr
       if (!options.isServer && options.dev) {
-        const { I18NextHMRPlugin } = require('i18next-hmr/plugin');
+        const { I18NextHMRPlugin } = require('i18next-hmr/webpack');
         config.plugins.push(new I18NextHMRPlugin({ localesDir: localePath }));
       }
 

apps/app/src/pages/_app.page.tsx

@@ -1,20 +1,20 @@
-import React, { ReactElement, ReactNode, useEffect } from 'react';
+import type { ReactElement, ReactNode } from 'react';
+import React, { useEffect } from 'react';
 
-import { NextPage } from 'next';
+import type { NextPage } from 'next';
 import { appWithTranslation } from 'next-i18next';
-import { AppProps } from 'next/app';
+import type { AppProps } from 'next/app';
 import { SWRConfig } from 'swr';
 
 import * as nextI18nConfig from '^/config/next-i18next.config';
 
 import { GlobalFonts } from '~/components/FontFamily/GlobalFonts';
-import { useI18nextHMR } from '~/services/i18next-hmr';
 import {
   useAppTitle, useConfidential, useGrowiVersion, useSiteUrl, useIsDefaultLogo, useForcedColorScheme,
 } from '~/stores/context';
 import { swrGlobalConfiguration } from '~/utils/swr-utils';
 
-import { CommonProps } from './utils/commons';
+import type { CommonProps } from './utils/commons';
 import { registerTransformerForObjectId } from './utils/objectid-transformer';
 
 import '~/styles/prebuilt/vendor.css';
@@ -22,8 +22,6 @@ import '~/styles/font-icons.scss';
 import '~/styles/style-app.scss';
 
 
-const isDev = process.env.NODE_ENV === 'development';
-
 // eslint-disable-next-line @typescript-eslint/ban-types
 export type NextPageWithLayout<P = {}, IP = P> = NextPage<P, IP> & {
   getLayout?: (page: ReactElement) => ReactNode,
@@ -37,8 +35,6 @@ type GrowiAppProps = AppProps & {
 registerTransformerForObjectId();
 
 function GrowiApp({ Component, pageProps }: GrowiAppProps): JSX.Element {
-  useI18nextHMR(isDev);
-
   useEffect(() => {
     import('bootstrap/dist/js/bootstrap');
   }, []);

apps/app/src/server/crowi/dev.js

@@ -2,8 +2,6 @@ import path from 'path';
 
 import express from 'express';
 
-import { i18n } from '^/config/next-i18next.config';
-
 import loggerFactory from '~/utils/logger';
 
 import nextFactory from '../routes/next';
@@ -24,8 +22,6 @@ class CrowiDev {
   }
 
   init() {
-    this.requireForAutoReloadServer();
-
     this.initPromiseRejectionWarningHandler();
   }
 
@@ -34,17 +30,6 @@ class CrowiDev {
     process.on('unhandledRejection', console.dir); // eslint-disable-line no-console
   }
 
-  /**
-   * require files for node-dev auto reloading
-   */
-  requireForAutoReloadServer() {
-    // load all json files for live reloading
-    i18n.locales
-      .forEach((localeId) => {
-        require(path.join(this.crowi.publicDir, 'static/locales', localeId, 'translation.json'));
-      });
-  }
-
   /**
    *
    * @param {any} app express
@@ -92,8 +77,6 @@ class CrowiDev {
   }
 
   setupExpressAfterListening(app) {
-    // this.setupBrowserSync(app);
-    this.setupWebpackHmr(app);
     this.setupNextjsStackFrame(app);
   }
 
@@ -102,11 +85,6 @@ class CrowiDev {
     app.use('/analyze', express.static(path.resolve(__dirname, '../../../.next/analyze')));
   }
 
-  setupWebpackHmr(app) {
-    const next = nextFactory(this.crowi);
-    app.all('/_next/webpack-hmr', next.delegateToNext);
-  }
-
   setupNextjsStackFrame(app) {
     const next = nextFactory(this.crowi);
     app.get('/__nextjs_original-stack-frame', next.delegateToNext);

apps/app/src/services/i18next-hmr.ts

@@ -1,26 +0,0 @@
-import { useEffect } from 'react';
-
-import { isServer } from '@growi/core/dist/utils';
-import { useTranslation } from 'next-i18next';
-
-export const useI18nextHMR = (isDev: boolean): void => {
-  const { i18n } = useTranslation();
-
-  useEffect(() => {
-    if (isDev) {
-      import('i18next-hmr/client').then(({ applyClientHMR }) => {
-        applyClientHMR(i18n);
-      });
-    }
-  }, [i18n, isDev]);
-
-  if (!isDev) {
-    return;
-  }
-
-  if ((isServer())) {
-    import('i18next-hmr/server').then(({ applyServerHMR }) => {
-      applyServerHMR(i18n);
-    });
-  }
-};