Integrating Storybook with next-intl/link

[lloydrichards]

Description

I've done some research and seen the previous issue #34 related to Storybook as well as tried to add the NextIntlProvide as suggested in the FAQ but i'm unable to get Storybook working when using the Link component from next-intl/link. Everytime i get the same error:

Cannot read properties of null (reading 'locale')
TypeError: Cannot read properties of null (reading 'locale')
    at useClientLocale (https://v6k3s6-6006.csb.app/vendors-node_modules_next-intl_dist_src_link_Link_js.iframe.bundle.js:24:15)
    at Link (https://v6k3s6-6006.csb.app/vendors-node_modules_next-intl_dist_src_link_Link_js.iframe.bundle.js:56:94)
    at renderWithHooks (https://v6k3s6-6006.csb.app/vendors-node_modules_storybook_addon-essentials_dist_actions_preview_mjs-node_modules_storybo-57ad00.iframe.bundle.js:47812:18)
    at updateForwardRef (https://v6k3s6-6006.csb.app/vendors-node_modules_storybook_addon-essentials_dist_actions_preview_mjs-node_modules_storybo-57ad00.iframe.bundle.js:50728:20)
    at beginWork (https://v6k3s6-6006.csb.app/vendors-node_modules_storybook_addon-essentials_dist_actions_preview_mjs-node_modules_storybo-57ad00.iframe.bundle.js:53138:16)
    at beginWork$1 (https://v6k3s6-6006.csb.app/vendors-node_modules_storybook_addon-essentials_dist_actions_preview_mjs-node_modules_storybo-57ad00.iframe.bundle.js:58928:14)
    at performUnitOfWork (https://v6k3s6-6006.csb.app/vendors-node_modules_storybook_addon-essentials_dist_actions_preview_mjs-node_modules_storybo-57ad00.iframe.bundle.js:58059:12)
    at workLoopSync (https://v6k3s6-6006.csb.app/vendors-node_modules_storybook_addon-essentials_dist_actions_preview_mjs-node_modules_storybo-57ad00.iframe.bundle.js:57968:5)
    at renderRootSync (https://v6k3s6-6006.csb.app/vendors-node_modules_storybook_addon-essentials_dist_actions_preview_mjs-node_modules_storybo-57ad00.iframe.bundle.js:57936:7)
    at recoverFromConcurrentError (https://v6k3s6-6006.csb.app/vendors-node_modules_storybook_addon-essentials_dist_actions_preview_mjs-node_modules_storybo-57ad00.iframe.bundle.js:57352:20)

Mandatory reproduction URL (CodeSandbox or GitHub repository)

https://codesandbox.io/p/sandbox/next-intl-bug-template-app-forked-v6k3s6?file=%2Fsrc%2Fstories%2FHeader.tsx%3A40%2C16

Reproduction description

Steps to reproduce:

1. Open reproduction
2. Open new terminal
3. Run yarn storybook
4. Go to the Header doc
5. See everything working and Router events being caught in the actions
6. Go to the HeaderWithIntl doc
7. See the error above

Expected behaviour

Since the Link is supposed to be a drop in for the one from Next i was surprised to see it not work in Storybook. I'm guessing there are some side-effects going on somewhere that might be either a bug or need documentation on how to integrate/stub

[amannn]

Thank you for the great bug report! There was indeed something missing here, I'll have a release that brings back Storybook support soon!

[lloydrichards]

Thank you so much for your speedy fix of this! can confirm that 2.15.1 has fixed the issue in the minimal repo 👍 keep up the great work!

[amannn]

@lloydrichards Sure, great to hear if it works for you!

I had a look at your website and noticed you live in Zurich. I live in the very western part of Austria in Dornbirn, just nearby. I got curious since you mention a focus on sustainability, I'm currently trying to get more into that area work-wise.

I tried to message you on Twitter, but I think you have DMs deactivated. Would you be interested to connect? I'd be curious to learn more about what kind of projects you're working on! 🙂 Only if you're interested of course!

Have a good one! 🙌

[lloydrichards]

@lloydrichards Sure, great to hear if it works for you!

I had a look at your website and noticed you live in Zurich. I live in the very western part of Austria in Dornbirn, just nearby. I got curious since you mention a focus on sustainability, I'm currently trying to get more into that area work-wise.

I tried to message you on Twitter, but I think you have DMs deactivated. Would you be interested to connect? I'd be curious to learn more about what kind of projects you're working on! 🙂 Only if you're interested of course!

Have a good one! 🙌

oh lovely! I was in Feldkirch not too long ago doing some exploring. Nice to have more local contacts. My twitter is very under used so its probably better to reach out on LinkedIn.

The majority of my sustainability work was in my previous job as a garden designer, but the company i work for now does a lot of NGO and SDG focused work in Data Visualization (Interactive Things)