How to use next-i18next with storybook?

I would like to integrate next-i18next with our storybook that is used in our nextjs app.

I cannot use appWithTranslation wrapper` as the storybook wrapper is just a normal react component and not App (ts fails as well)

One story is defined for example as Banana.stories.tsx

storiesOf('Banana', module).add('default', () => {
    return (
        <StoryWrapper>
            <BananaForm {...props} />
        </StoryWrapper>
    );
});

and StoryWrapper.tsx is just adding the styled components context to all the stories

    <ThemeProvider theme={getTheme(props.theme)}>
        <Fragment>
            {props.children}
        </Fragment>
    </ThemeProvider>

If BananaForm contains useTranslation hook storybook will crash and that brings me to the question posted here.

How to integrate this library with storybook ?

Would be really awesome developer experience to use same translations as the real project

[isaachinman]

Duplicate of #1713.

[zaratan]

If anyone is using webpack 5 with storybook @thebinaryfelix solution almost worked for me.

The only difference was in .storybook/main.js as webpack config do not support {node: { fs: 'empty' }} anymore.

module.exports = {
  // …
  webpackFinal: async (config) => {
    config.resolve ||= {}
    config.resolve.fallback ||= {}
    config.resolve.fallback.fs =  false;

    return config
  },
}