ReferenceError: require is not defined at preview.js:1:1

[laneschmidt]

Hey 🤝
So I am getting this error/loading spinner...

ReferenceError: require is not defined
    at preview.js:1:1

Similar to this issue, though the proposed solution there was to remove the addon 😅

After following the docs to add this to my package, i ended up with the following pieces:

package.json (only relevant pkgs)

"dependencies": {
    "i18next": "^21.6.14",
    "react": "18.0.0",
    "react-dom": "18.0.0",
    "react-i18next": "^11.16.2",
    "react-router-dom": "6.2.2"
  },
  "devDependencies": {
    "@storybook/addon-actions": "6.5.0-alpha.51",
    "@storybook/addon-essentials": "6.5.0-alpha.51",
    "@storybook/addon-links": "6.5.0-alpha.51",
    "@storybook/addon-postcss": "2.0.0",
    "@storybook/client-api": "6.5.0-alpha.51",
    "@storybook/client-logger": "6.5.0-alpha.51",
    "@storybook/core-common": "6.5.0-alpha.51",
    "@storybook/react": "6.5.0-alpha.51",
    "storybook-builder-vite": "0.1.22",
    "storybook-react-i18next": "^1.0.18",
    "typescript": "4.6.3",
    "vite": "2.9.0"

preview.js

import { i18n } from './i18next.js';
import '../src/output.css';

export const parameters = {
  i18n,
  locale: 'en',
  locales: {
    en: 'English',
    fr: 'Français',
  },
  actions: { argTypesRegex: '^on[A-Z].*' },
  controls: {
    matchers: {
      color: /(background|color)$/i,
      date: /Date$/,
    },
  },
};

main.js

module.exports = {
  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    'storybook-react-i18next',
  ],
  framework: '@storybook/react',
  core: {
    builder: 'storybook-builder-vite',
  },
};

i18next.js

import { initReactI18next } from 'react-i18next';
import i18n from 'i18next';
import LanguageDetector from 'i18next-browser-languagedetector';

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

i18n.use(LanguageDetector)
  .use(initReactI18next)
  .init({
    debug: true,
    lng: 'en',
    fallbackLng: 'en',
    interpolation: {
        escapeValue: false,
    },
    defaultNS: 'common',
    ns,
    supportedLngs,
  });

supportedLngs.forEach((lang) => {
  ns.forEach((n) => {
    i18n.addResourceBundle(
      lang,
      n,
      require(`../public/locales/${lang}/${n}.json`),
    );
  });
});

export { i18n };

[laneschmidt]

initially thinking esm compatibility issues maybe?

[stevensacks]

React 18 just came out. The storybook team haven’t released a version that is compatible with it, yet.

[laneschmidt]

storybook is running fine on react 18.

edit: nevermind, i am seeing some issue(s) calling for support of React 18 in the Storybook repo.

still, i've been running it since it was released however, no issues (other than this add-on).

[thomasverleye]

Hi,

Just going to mention this here.

👋

[stevensacks]

I have updated the plugin to no longer use suspense. Please check the updated README instructions.