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 :)

[Gawdfrey]

Hmm this worked flawlessly, until I had pages that had two different await getTranslations() functions..
Getting Error: Failed to call useTranslationsbecause the context fromNextIntlClientProvider was not found..
Removing the second one makes it render, and can't really understand why 😓

Currently mocking it like this

import { useLocale, useMessages, 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);
export const getMessages = async () => useMessages();

[alessiosferro]

Had the same issue, solved it by using Promise.all 😄

[Gawdfrey]

That worked perfectly, but still a bit annoying having to change real code for Storybook, but eh. Thanks for sharing!

[dmitrc]

This is actually a really interesting side effect, and I also was not able to get to the bottom of it yet.

With the simple mock above and proper <NextIntlClientProvider> wrapper, the story for this component works:

export default async function Test() {
  const t = await getTranslations("Test");
  const obj = await somethingElse();
  return (...);
 }

But this one doesn't:

export default async function Test() {
 const obj = await somethingElse();

 // Failed to call `useTranslations` because the context from `NextIntlClientProvider` was not found.
 const t = await getTranslations("Test");

 return (...);
}

Not really sure what makes the context get lost one layer deep here...
Probably the specifics of how Storybook emulates RSC components + potentially more weirdness.

Do you have any hunches for what could this possibly be, @amannn?