Add storybook example

[magnattic]

Could you add an example for storybook in the example folder?

I got it working for v7 but with v8 I get errors (Can't resolve 'fs').

This is probably because I have not set it up correctly, but I couldn't find a good example on how it should be initialized in storybook.

[nx-alejandrolacasa]

I had the same issue and I fixed it by adding some webpack magic to the storybook setup:

// .storybook/main.js
module.exports = {
  addons: [
    ...
  ],
  stories: [
    ...
  ],
  webpackFinal: (config) => {
    return {
      ...config,
      node: {
        ...config.node,
        fs: 'empty',
      },
    }
  },
}

I hope this works for you!

[isaachinman]

Yeah, adding fs: 'empty' should be all that's necessary. Let me know if you have any further issues.

[natterstefan]

FTR: if you have issues with webpack@5 and next-i18next@8 I've got a solution for you (inspired by storybookjs/storybook#4082 (comment)):

First of all, add this to your .storybook/main.js

// .storybook/main.js
module.exports = {
  /**
   * Storybook uses Webpack@4 by default, but we require Webpack@5 already.
   * @see https://storybook.js.org/blog/storybook-for-webpack-5/
   * @see https://gist.github.com/shilman/8856ea1786dcd247139b47b270912324#upgrade
   */
  core: {
    builder: 'webpack5',
  },
  // ... other settings
  webpackFinal: config => {
    /**
     * Fixes issue with `next-i18next` and is ready for webpack@5
     * @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/
     */
    config.resolve.fallback = {
      fs: false,
      tls: false,
      net: false,
      module: false,
      path: require.resolve('path-browserify'),
    }

    return config
  },
}

But that's not enough! You also need to adjust the decorators.

// .storybook/preview.js
import i18n from 'i18next'
import { initReactI18next } from 'react-i18next'

export const decorators = [
  // ... other decorators
  (Story, Context) => {
    i18n.use(initReactI18next).init({
      lng: 'en',
      fallbackLng: 'en',

      // have a common namespace used around the full app
      ns: ['translations'],
      defaultNS: 'translations',

      // debug: true,

      interpolation: {
        escapeValue: false, // not needed for react!!
      },

      // TODO: load actual translations from the *.json files
      resources: { en: { translations: {} } },
    })

    return <Story />
  },
]

@isaachinman, I support @magnattic's initial request that this repo should contain a storybook example. It could help others to resolve the issue quickly without getting frustrated. Please, think about it. Thanks.

---

Edit: This could be of interest to others as well: Using next-i18next in Storybook. I have not tried it yet, but it looks promising. Let's see.

Edit 2: Maybe #935 (comment) could make the code above obsolete as well.

[jtonneyck]

I've created a full working example.

[natterstefan]

I've created a full working example.

Thank you. I'll take a look at it. Looks promising from the first glance!

[jtonneyck]

Thanks! The initial commit was buggy. I gave it a polish. ;)

…

On 25 Jun 2021, at 14:38, Stefan Natter ***@***.***> wrote: I've created a full working example <https://github.com/Piepongwong/gatsby_nextjs_storybook_i18n_scaffolding>. Thank you. I'll take a look at it. Looks promising from the first glance! — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#1012 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AFOHDJY5DVMNQ6V6CVLY6F3TUR2DXANCNFSM4YQ4JVCQ>.

[natterstefan]

Hi @Piepongwong,

I was not able to apply your solution in my setup. :/ I'll post an issue in your repo.

[mkbctrl]

@jtonneyck you are life saver. With Next 12.2 (Tailwind + TS) and your repo the provided example didn't want to work out of the box, so after the following adjustments I got it flying. Hope this helps someone:

// main.ts
module.exports = {
  stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'],
  staticDirs: ['../public'],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/addon-interactions',
    'storybook-addon-i18next/register',
    {
      name: '@storybook/addon-postcss',
      options: {
        postcssLoaderOptions: {
          implementation: require('postcss'),
        },
      },
    },
  ],
  framework: '@storybook/react',
  core: {
    builder: '@storybook/builder-webpack5',
  },
  webpackFinal: (config) => {
    config.resolve.fallback = {
      fs: false,
      tls: false,
      net: false,
      module: false,
      assert: false,
      path: require.resolve('path-browserify'),
    }
    return config
  },
}

// preview.ts
// preview.ts
import i18n from 'i18next'
import LanguageDetector from 'i18next-browser-languagedetector'
import Backend from 'i18next-xhr-backend'
import React, { Suspense } from 'react'
import { initReactI18next } from 'react-i18next'
import { withI18next } from 'storybook-addon-i18next'

import '../src/application/styles/globals.css'

i18n
  .use(Backend)
  .use(LanguageDetector)
  .use(initReactI18next)
  .init({
    lng: 'en',
    fallbackLng: 'en',
    interpolation: {
      escapeValue: false,
    },
  })
// TODO: We need to add here components provided by next like next/image, next/link in order to work with storybook
// TODO: Current version of next is not compatible with storybook, there is no quick fix atm

export const parameters = {
  actions: { argTypesRegex: '^on[A-Z].*' },
  controls: {
    matchers: {
      color: /(background|color)$/i,
      date: /Date$/,
    },
  },
}

export const decorators = [
  withI18next({ i18n, languages: { en: 'English' } }),
  (Story) => {
    return (
      <Suspense fallback="loading...">
        <Story />
      </Suspense>
    )
  },
]

if (typeof global.process === 'undefined') {
  const { mswWorker } = require('../src/infrastructure/mocks/mswWorker')
  mswWorker.start()
}

Please do follow the scaffolding repo before you apply my changes, focus especially on packages installed in package.json. What I changed there, I moved all of them to dev dependencies.

Important detail:
if I specify react-i18n resources like this:

const supportedLngs = ['en']
const resources = ns.reduce((acc, n) => {
  supportedLngs.forEach((lng) => {
    if (!acc[lng]) acc[lng] = {}
    acc[lng] = {
      ...acc[lng],
      [n]: require(`../public/locales/${lng}/${n}.json`),
    }
  })
  return acc
}, {})

i18n
  .use(Backend)
  .use(LanguageDetector)
  .use(initReactI18next)
  .init({
    fallbackLng: 'en',
    interpolation: {
      escapeValue: false,
    },
    resources,
  })

Translations stop working. Source: https://storybook.js.org/addons/storybook-react-i18next
Following this article made me fail each time I tried.

This worked, however I struggle to comprehend why:

i18n
  .use(Backend)
  .use(LanguageDetector)
  .use(initReactI18next)
  .init({
    fallbackLng: 'en',
    interpolation: {
      escapeValue: false,
    },
  })

and the console error is expected:

http://localhost:6006/locales/en/translation.json 404 (Not Found)

[DominicGBauer]

For anyone that comes here there is an update to the webpack where fs: "empty" doesn't work anymore. The fix is below:

In ./storybook/main.ts:

module.exports = {
  webpack: (config) => {
    config.resolve.fallback.fs = false;
    return config;
  },
}

Source: https://stackoverflow.com/a/68511591

[yuriwc]

For anyone that comes here there is an update to the webpack where fs: "empty" doesn't work anymore. The fix is below:

In ./storybook/main.ts:

module.exports = {
  webpack: (config) => {
    config.resolve.fallback.fs = false;
    return config;
  },
}

Source: https://stackoverflow.com/a/68511591

I was already confused trying to understand why it didn't work, you saved my day.