"Storybook preview hooks can only be called inside decorators and story functions." error

See original GitHub issue

Describe the bug

We’ve got a custom addon that we’ve written internally to allow us to document / manipulate our i18n translations inside storybooks & we’re having trouble getting it to work with this.

So far I’ve:

  • Started to set up @storybookjs/testing-react (which, once we get it working will save a lot of time & be incredibly useful so thanks)
  • Noticed that the decorator provided by the addon wasn’t being applied (which I guess makes sense? the .storybook/main.js with the addon array isn’t referenced anywhere)
  • Thought I’d use the setGlobalConfig to manually add in the decorator from our addon
  • Got the Storybook preview hooks can only be called inside decorators and story functions. error

Our decorator looks something like:


import React, { useEffect, useState } from "react"
import { I18nContext } from "@our_stuff/i18nContext"
import I18n from "@our_stuff/i18n"
import { makeDecorator, useGlobals, useParameter } from "@storybook/addons"

export const withOurI18n = makeDecorator({
  name: "withOurI18n",
  parameterName: "i18n",
  wrapper: (storyFn, context, { parameters }) => {
    const paramI18nData = useParameter("i18n", {})
    const [{ "our-intl": intlData }] = useGlobals()
    const [i18n, setI18n] = useState(getNewI18nForData(intlData || paramI18nData))

    useEffect(() => {
      if (intlData) setI18n(I18n(intlData))
    }, [intlData])

    return <I18nContext.Provider value={i18n}>{storyFn()}</I18nContext.Provider>
  },
})

(it’s rough & has bugs but it works when viewing one story in storybook)

Our jest.setup.js looks like:

import { setGlobalConfig } from "@storybook/testing-react"
import * as globalStorybookConfig from "../.storybook/preview"
import { withOurI18n } from "@our_stuff/storybook-addon-i18n/dist/decorators/withI18n"

setGlobalConfig({ ...globalStorybookConfig, decorators: [withOurI18n] })

At the moment our test looks pretty much exactly like the one in the getting started documentation

Let me know if there’s anything else I can provide that’d be useful

Expected behavior Would expect the decorators to function the same way they do when viewing the story in the storybook.

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Reactions:5
  • Comments:18 (5 by maintainers)

github_iconTop GitHub Comments

13reactions
yannbfcommented, Jan 27, 2022

Hey everyone, I found the reason for this issue. The composed story does not contain Storybook specific hooks (like useEffect coming from @storybook/addons) and will fail because the hooks are not provided in the context. I’ll try my best to fix it!

7reactions
nahumzscommented, Mar 15, 2022

maybe unrelated to the question, but is one of the first answers when using google for this error.

My case I clicked cmd + "." in vscode and instead of vscode automatically importing useEffect from react did it from storybook, don’t know how good of an idea was named useEffect after the “real” react useEffect 😛, small inconvenience.

Read more comments on GitHub >

github_iconTop Results From Across the Web

React js using useState Hook - Stack Overflow
Storybook preview hooks can only be called inside decorators and story functions. Please help. My Full component import React,{ useCallback } ...
Read more >
Decorators - Storybook - JS.ORG
A decorator is a way to wrap a story in extra “rendering” functionality. Many addons define decorators to augment your stories with extra...
Read more >
Don't export hooks with the same names as the core React ...
I often end up importing the wrong one, resulting in a Storybook preview hooks can only be called inside decorators and story functions...
Read more >
Mocking React Context in Storybook | by John Clarke - Medium
At it's simplest, a decorator is a function that takes the story and optionally a context, and renders the story with any additional...
Read more >
𝚑𝚊𝚔𝚘 on Twitter: "Error: Storybook preview hooks can only be ...
Error : Storybook preview hooks can only be called inside decorators and story functions. -> useStateがStorybookのアドオンからimportされてた自動補完で気づか ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found