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."));
  };
}

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

[Demianeen]

@dmitrc, do you get Rules of Hook error when use use useTranslations like this?

[dmitrc]

@Demianeen, depending on how strictly is your ESLint configured, you might need to suppress the warning:

export function getTranslations(...args: Parameters<typeof useTranslations>) {
  // eslint-disable-next-line react-hooks/rules-of-hooks
  return useTranslations(...args);
}

If there are still runtime errors afterwards, you should double-check your mocking setup and the translations usage (which should still be inside an RSC / function component).

[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?

[dmitrc]

Started an issue over in the Storybook repo to look into this behavior further -- storybookjs/storybook#30317. As of Storybook v8.5.0, the error about the missing context has now become an infinite re-render loop instead.