storybook error

[wherehows]

Description

I setup Option 4 in my storybook and nextjs application

in nextjs application, the Option 4 setup works well. but in storybook, storybook makes an error even if i wrapping Story Component with <NextIntlClientProvider> as follow :

You can verify specific symptoms through CodeSandbox.

Mandatory reproduction URL (CodeSandbox or GitHub repository)

https://codesandbox.io/p/devbox/next-intl-bug-template-app-forked-pxyx5n?file=%2F.storybook%2Fpreview.tsx%3A10%2C7&workspaceId=3b663f32-b4b0-43b5-9910-dc5ef7e82cb5

Reproduction description

Steps to reproduce:

1. enter yarn sbin terminal
2. open 6006 port

Expected behaviour

Storybook must not make an error

[amannn]

You're seeing this error because you're invoking useMessages in preview.tsx outside of NextIntlClientProvider. Here's a fixed version.

I'll move this to a discussion since it's a usage question.

[phibo23]

Hi, the code sandbox link doesn't work anymore. Is it the same solution as in the jest example where the static json is imported instead of useMessages? If it is a different solution, could you please repost the fixed example?
https://next-intl-docs.vercel.app/docs/faq#can-next-intl-be-used-with-jest-and-storybook
https://github.com/amannn/next-intl/blob/main/examples/example-app-router/src/components/Navigation.spec.tsx

[amannn]

You should be able to fork the Sandbox to your own workspace to see the code.

[phibo23]

I did try that, but the content seems to be unrelated to the storybook preview.tsx scenario that @wherehows described in his code sandbox https://codesandbox.io/p/devbox/next-intl-bug-template-app-forked-7w4p8n?workspaceId=2cc84ccc-52ef-43aa-8dee-0266375bb19e

[amannn]

This was the issue in that example:

You're seeing this error because you're invoking useMessages in preview.tsx outside of NextIntlClientProvider.

The fix is to not use useMessages there but to import the messages via an import. useMessages really only returns what was configured on NextIntlClientProvider previously in that environment.

[Rikard-Johansson97]

I'm facing issues using getTranslations in Storybook 8.0 alpha with its new React Server Components (RSC) support.

RSC PR with nextjs

maybe its possible to mock getTranslation in some way.

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

/**
 * Allows to import `next-intl/server` in non-RSC environments.
 *
 * This is mostly relevant for testing, since e.g. a `generateMetadata`
 * export from a page might use `next-intl/server`, but the test
 * only uses the default export for a page.
 */

function notSupported(message) {
  return () => {
    throw new Error("`".concat(message, "` is not supported in Client Components."));
  };
}

[markomitranic]

@loki344 Sure, I did exactly as described above :)

// .storybook/__mock__/next-intl-server.ts
import { useLocale, useTranslations } from "next-intl";

/**
 * `get` functions don't work in Storybook, so we mock them.
 * @see https://github.com/amannn/next-intl/discussions/771#discussioncomment-9587798
 */

export const getLocale = async () => useLocale();
export const getTranslations = async (
  ...args: Parameters<typeof useTranslations>
) => useTranslations(…args);

In order to do that, I had to add this file to Storybook's main.ts file, under webpack configuration:

const config: StorybookConfig = {
  //..... other stufff....

  webpackFinal: async (config, { configType }) => {
    config.resolve ||= {};
    config.resolve.alias ||= {};

    config.resolve.modules = [path.resolve(__dirname, ".."), "node_modules"];
    config.resolve.alias = {
      ...config.resolve.alias,

      // Allows for importing stuff like mocks from the .storybook folder.
      // @see https://github.com/storybookjs/storybook/issues/11639#issuecomment-690834754
      ".storybook": path.resolve(__dirname, "./"),

      // `getTranslations` doesn't work in Storybook, so we mock it.
      // @see https://github.com/amannn/next-intl/discussions/771#discussioncomment-9587798
      "next-intl/server": path.resolve(
        __dirname,
        "./__mock__/next-intl-server.ts",
      ),
    };

    return config;
  },
};

export default config;

Finally, I've had to ensure that my Storybook's preview.tsx understands next-intl as described in next-intl docs:

import { Preview } from "@storybook/react";
import { NextIntlClientProvider } from "next-intl";
import da from "../messages/da/messages.json";

const preview: Preview = {
   //..... other stufff....

  decorators: [
    (Story) => (
      <NextIntlClientProvider
        locale="da-DK"
        messages={da}
        timeZone={"Europe/Copenhagen"}
      >
        <div className="font-tex-regular">
          <Story />
        </div>
      </NextIntlClientProvider>
    ),
  ],
};

export default preview;

UPDATE 25.06.2024: Updated the code examples based on below comments.

[loki344]

@markomitranic thank you!
Are dynamic translations working for you?
e.g. if you have
"delete-title-single": "{item} löschen",
is it translated correctly or does it simply show the key of the translation and throw an error in the log?

[dmitrc]

The above example is a very basic proof-of-concept. If you need additional arguments handled, you can replace ns: string part with ...args and pass that onwards to useTranslations method.

[markomitranic]

Yes, I'm blind for not seeing it lol

export const getTranslations = async (
  ...args: Parameters<typeof useTranslations>
) => useTranslations(…args);

I'll update the above example for any future readers ;)

[Gawdfrey]

Thanks, you saved me a lot of time :)