Use with Vite builder

[brettdewoody]

I'm using Vite (instead of webpack) and when implementing storybook-react-i18next there's an error of:

Uncaught ReferenceError: require is not defined
    at preview.js?

due to this file using a require statement.

Any desire to make this work with Vite? If so I'd like to take a shot at a PR.

[stevensacks]

I actually didn't write that part (Shilman did) so I'm not sure how to change it. If you know how to change it and have it work universally, by all means, please submit a PR 😊

[shilman]

There are two proposed fixes to a similar problem here:

• https://github.com/storybookjs/storybook/pull/16727/files
• https://github.com/storybookjs/storybook/pull/17108/files

The first renames the file to .cjs. The second switches to async imports, which I don't think applies here (including for completeness). That might be enough to solve the issue?

[MarkLyck]

@stevensacks @brettdewoody I just stumbled upon this, after running into the same error.

Did you ever find a solution? and if it's not part of this code that needs fixing, which github repo should I be looking at?

I see that 1 of the 2 PRs above was merged, and the other was closed? But at least in the latest storybook it's still broken.

I tried @next, and got this error instead:

Uncaught SyntaxError: The requested module '/node_modules/@storybook/addon-docs/node_modules/acorn-jsx/index.js?v=ae9ccf26' does not provide an export named 'default'

But that seems unrelated and happens whether storybook-react-i18next is there or not.

For now I've had to completely remove this addon from storybook to keep developing.

[wanbinkimoon]

same problem here

[laneschmidt]

same issue: #11

this issue could also be related, i'm pretty ignorant on ES modules vs CommonJS though.

[dohomi]

I can confirm, a basic starter with storybook-vite breaks after installing this plugin with the require statement. I use React 17 not 18 as mentioned in #11

[thomasverleye]

Hi everyone 👋

I've fixed this by using a Backend (the same I'm using for our Remix-i18next setup 🤗) instead of loading all locale json files.

Here you can see my .storybook/i18next.js config file:

import {initReactI18next} from 'react-i18next';
import i18n from 'i18next';
import Backend from 'i18next-http-backend';

const ns = ['common'];
const supportedLngs = ['en'];

i18n.use(initReactI18next)
    .use(Backend)
    .init({
        //debug: true,
        lng: 'en',
        fallbackLng: 'en',
        interpolation: {
            escapeValue: false,
        },
        react: { useSuspense: false },
        defaultNS: 'common',
        ns,
        supportedLngs,
        backend: {
          loadPath: '/locales/{{lng}}/{{ns}}.json'
        }
    });

export default i18n;

As you can see I use i18next-http-backend as my backend and added a loadPath instead of requiring all files once :-)
The files don't have relative paths as my public folder is set to a static dir in Storybook ;-)

I have also added react: { useSuspense: false }, to the config because when reloading a component in browser I'm getting suspense errors in Storybook.

Have a nice day 👋

[stevensacks]

Storybook 7 and version 2 of this add-on should work with Vite.