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

[natterstefan]

TASK

Issues

• resolves Fix Storybook related to next-i18next setup #7

Tasks

• Think about replacing https://github.com/isaachinman/next-i18next with https://github.com/vinissimus/next-translate. It's not as developer-friendly IMHO as it could be (e.g. [error/warning]: You will need pass in an i18next instance by using initReactI18next i18next/react-i18next#876 is irritating). I spent hours debugging it at my company and also in this repository to make it work (again) with Next@11, Storybook, and Jest for instance.

next-i18next

• I was not able to use my proposed solution too https://github.com/isaachinman/next-i18next/issues/1012#issuecomment-818042184. 🤔
• try this solution for Storybook (see react-i18next:: You will need to pass in an i18next instance by using initReactI18next jtonneyck/gatsby_nextjs_storybook_i18n_scaffolding#1)
  • did not work, although I tried it with webpack@5 as well with that example repo
• or this npm package https://github.com/stevensacks/storybook-react-i18next
  • I used it and replaced https://www.npmjs.com/package/storybook-addon-i18next, it also did not work and I saw the same error (see screenshot below)
• take a look at the example repo in react-i18next
  • I do what they do (see i18n.js), don't I?
• find out how he resolved the issue with webpack@5: @storybook/react ^6.3.0-beta.1 i18next/react-i18next#1326 (comment)
  • I was not able to create an example with webpack@5 and react-i18next (the mentioned commit in the issue is not what I was looking for), because of [Bug] (preset-create-react-app) [webpack-dev-middleware] TypeError: Cannot read property 'length' of undefined when updating to SB 6.3 and WebPack 5. storybookjs/presets#207.
  • And as of today (2021-08-05) CRA's support for Webpack@5 is only in alpha stage (Webpack 5 facebook/create-react-app#11201)

webpack@5 vs. webpack@4

• I tried both and neither of them worked. So it does not seem to be related to webpack.

Screenshot of the issue

This is the warning I am struggling with: react-i18next:: You will need to pass in an i18next instance by using initReactI18next. Because it does not load translations when I get this error...

[vercel]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/natterstefan/nextjs-template/CsXkLGWy49Sj5Ckfa3rt4tg5wvMk
✅ Preview: https://nextjs-template-git-fix-storybook-i18next-webpack5-natterstefan.vercel.app

[natterstefan]

Status Update for anyone reading this

Storybook i18n Setup

• Maybe doing what they did here Support changing the language to Spanish in Storybook and Jest cagov/ui-claim-tracker#344 helps solve this issue. 🤔 . I need to test the solution used in jest-i18n.ts

There was also an update in the docs of next-i18next making me aware of the ns property in the i18n config: https://github.com/locize/next-i18next-locize/blob/3d2c4af7511a58e093073755283f4d092bcf5676/next-i18next.config.js#L17. Can this be helpful? It's also used in the linked PR above.

Vercel Deployment Issue

I also experienced other issues in that Vercel is not able to find the translation files when deploying Storybook with next-i18next. See the following issues:

• https://github.com/isaachinman/next-i18next/issues/1475#issuecomment-947487215
• https://github.com/isaachinman/next-i18next/issues/1458#issuecomment-940221905
• https://github.com/isaachinman/next-i18next/issues/1198#issuecomment-840666945
• https://github.com/isaachinman/next-i18next/issues/1080#issuecomment-802974090
• https://github.com/isaachinman/next-i18next/issues/1005#issuecomment-791932403 (proposes a solution, which does not work in Storybook though...) -> Will this help to deploy Storybook on Vercel?

Solution (hack IMHO)

/* eslint-disable @typescript-eslint/no-var-requires */
const path = require('path')

/**
 * HACK: make sure Vercel includes those files
 */
if (typeof window === 'undefined') {
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  const _files = path.resolve('./public/locales')
}

/**
 * Docs:
 * @see https://nextjs.org/docs/advanced-features/i18n-routing
 * @type {import('next').NextConfig["i18n"]}
 */
const i18n = {
  defaultLocale: 'en',
  locales: ['en', 'de'],
  // without the need to add this line
  // localePath: path.resolve('./public/locales'),
}

module.exports = {
  i18n,
}