fix: storybook can use next-i18next in webpack@5 setup

.storybook/i18n.js

@@ -1,42 +1,47 @@
 import { initReactI18next } from 'react-i18next'
-import i18n from 'i18next';
-
-import Backend from 'i18next-xhr-backend';
-import LanguageDetector from 'i18next-browser-languagedetector';
+import i18n from 'i18next'
+// import Backend from 'i18next-xhr-backend'
+import LanguageDetector from 'i18next-browser-languagedetector'
 
+const ns = ['common']
+const supportedLngs = ['en', 'de']
 
 /**
- * Example
- * - @see https://github.com/i18next/react-i18next/blob/7cfab9746b3ccc6f833cd9c892e7c3c804944a5e/example/react-typescript4.1/namespaces/src/i18n/config.ts#L13
+ * Inspired by and uses:
+ * - @see https://github.com/stevensacks/storybook-react-i18next
+ *
+ * Other Examples:
+ * - @see https://github.com/i18next/react-i18next/blob/c383abdb8d0f874a64bea3147a3dd3b9e1853f5e/example/storybook/src/i18n.js#L6-L24
  */
 i18n
-.use(Backend)
-.use(LanguageDetector)
-.use(initReactI18next)
-.init({
-  lng: 'en',
-  fallbackLng: 'en',
-  // have a common namespace used around the full app
-  ns: ['common'],
-  defaultNS: 'common',
-  debug: true,
-  interpolation: {
-    escapeValue: false, // not needed for react!!
-  },
-  // resources: {
-  //   en: {
-  //     'common': {
-  //       "home": "Home GERMAN",
-  //       "home_EN": "Home English"
-  //     }
-  //   },
-  //   de: {
-  //     'common': {
-  //       "home": "Home DEUTSCH",
-  //       "home_EN": "Home ENGLISCH"
-  //     }
-  //   }
-  // },
+  // load translation using http -> see /public/locales
+  // learn more: https://github.com/i18next/i18next-http-backend
+  // .use(Backend)
+  // detect user language
+  // learn more: https://github.com/i18next/i18next-browser-languageDetector
+  .use(LanguageDetector)
+  // pass the i18n instance to react-i18next.
+  .use(initReactI18next)
+  // init i18next
+  // for all options read: https://www.i18next.com/overview/configuration-options
+  .init({
+    lng: supportedLngs[0],
+    fallbackLng: supportedLngs[0],
+    // have a common namespace used around the full app
+    ns,
+    defaultNS: ns[0],
+    debug: true,
+    interpolation: {
+      escapeValue: false, // not needed for react!!
+    },
+    supportedLngs,
+    whitelist: supportedLngs,
+  })
+
+supportedLngs.forEach(lang => {
+  ns.forEach(n => {
+    i18n.addResources(lang, n, require(`../public/locales/${lang}/${n}.json`))
+  })
 })
 
-export default i18n
+export default i18n

.storybook/main.js

@@ -14,7 +14,6 @@ module.exports = {
     '@storybook/addon-links',
     '@storybook/addon-essentials',
     'storybook-addon-next-router',
-    'storybook-addon-i18next/register',
     {
       /**
        * NOTE: fix Storybook issue with PostCSS@8
@@ -27,6 +26,7 @@ module.exports = {
         },
       },
     },
+    'storybook-react-i18next',
   ],
   webpackFinal: config => {
     /**
@@ -52,16 +52,16 @@ module.exports = {
      * @see https://github.com/isaachinman/next-i18next/issues/1012#issuecomment-792697008
      * @see https://github.com/storybookjs/storybook/issues/4082#issuecomment-758272734
      * @see https://webpack.js.org/migrate/5/
-     * 
+     *
      * source: https://github.com/isaachinman/next-i18next/issues/1012#issuecomment-818042184
      */
     config.resolve.fallback = {
       ...config.resolve?.fallback,
       fs: false,
-      // tls: false,
-      // net: false,
-      // module: false,
-      // path: require.resolve('path-browserify'),
+      tls: false,
+      net: false,
+      module: false,
+      path: require.resolve('path-browserify'),
     }
 
     return config

.storybook/preview.js

@@ -1,7 +1,5 @@
-import React, { Suspense } from 'react';
-import { RouterContext } from "next/dist/next-server/lib/router-context";
-// import { I18nextProvider } from 'react-i18next';
-import { withI18next } from 'storybook-addon-i18next';
+import { Suspense } from 'react'
+import { RouterContext } from 'next/dist/next-server/lib/router-context'
 
 import '../src/styles/index.scss'
 
@@ -22,11 +20,20 @@ export const parameters = {
     asPath: '/', // defaults to `/`
     query: {}, // defaults to `{}`
     push() {}, // defaults to using addon actions integration, can override any method in the router
-  }
+  },
+  // @see https://github.com/stevensacks/storybook-react-i18next
+  i18n,
+  locale: 'en',
+  locales: {
+    en: 'English',
+    de: 'Deutsch',
+  },
 }
 
 export const decorators = [
-  // Story => <I18nextProvider i18n={i18n}><Story /></I18nextProvider>,
-  withI18next({ i18n, languages: { en: 'English', de: 'Deutsch' }}),
-  Story => <Suspense fallback='loading...'><Story /></Suspense>
+  Story => (
+    <Suspense fallback={<div>loading...</div>}>
+      <Story />
+    </Suspense>
+  ),
 ]

package.json

@@ -22,7 +22,7 @@
     "lint:css": "stylelint --cache './**/*.{ts,tsx,scss}'",
     "prepare": "node scripts/setup && is-ci || husky install",
     "start": "next start",
-    "storybook": "start-storybook -p 6006 -s ./public",
+    "storybook": "start-storybook -p 6006 -s public",
     "test": "jest",
     "test:cypress": "start-server-and-test dev 3000 cypress:open",
     "test:cypress:ci": "yarn build && start-server-and-test start 3000 cypress:run"
@@ -31,7 +31,6 @@
     "date-fns": "^2.23.0",
     "i18next": "^20.3.5",
     "i18next-browser-languagedetector": "^6.1.2",
-    "i18next-xhr-backend": "^3.2.2",
     "next": "^11.0.1",
     "next-compose-plugins": "^2.2.1",
     "next-i18next": "^8.5.5",
@@ -41,7 +40,7 @@
     "react-i18next": "^11.11.4"
   },
   "devDependencies": {
-    "@babel/core": "^7.14.8",
+    "@babel/core": "^7.15.0",
     "@commitlint/cli": "^13.1.0",
     "@commitlint/config-conventional": "^13.1.0",
     "@natterstefan/scripts": "^1.2.0",
@@ -69,7 +68,7 @@
     "autoprefixer": "^10.3.1",
     "babel-loader": "^8.2.2",
     "css-loader": "^6.2.0",
-    "cypress": "^8.1.0",
+    "cypress": "^8.2.0",
     "enzyme": "^3.11.0",
     "eslint": "^7.25.0",
     "eslint-config-airbnb": "^18.2.1",
@@ -93,12 +92,13 @@
     "postcss-loader": "^6.1.1",
     "postcss-preset-env": "^6.7.0",
     "prettier": "^2.2.1",
-    "sass": "^1.37.2",
+    "sass": "^1.37.5",
     "sass-loader": "^12.1.0",
     "semantic-release": "^17.4.4",
     "start-server-and-test": "^1.13.1",
     "storybook-addon-i18next": "^1.3.0",
     "storybook-addon-next-router": "^3.0.5",
+    "storybook-react-i18next": "^1.0.6",
     "style-loader": "^3.2.1",
     "stylelint": "^13.13.1",
     "stylelint-config-recommended": "^5.0.0",

src/__stories__/pages-index.stories.tsx

@@ -0,0 +1,14 @@
+import React from 'react'
+import { Story, Meta } from '@storybook/react'
+
+import IndexPage from '@/pages/index'
+
+export default {
+  title: 'Pages',
+  component: IndexPage,
+} as Meta
+
+const Template: Story = args => <IndexPage {...args} />
+
+export const Home: Story = Template.bind({})
+Home.args = {}