"Storybook preview hooks can only be called inside decorators and story functions." error
See original GitHub issueDescribe 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.jswith the addon array isn’t referenced anywhere) - Thought I’d use the
setGlobalConfigto 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:
- Created 2 years ago
- Reactions:5
- Comments:18 (5 by maintainers)
Top 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 >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Hey everyone, I found the reason for this issue. The composed story does not contain Storybook specific hooks (like
useEffectcoming from@storybook/addons) and will fail because the hooks are not provided in the context. I’ll try my best to fix it!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 fromreactdid it from storybook, don’t know how good of an idea was named useEffect after the “real” react useEffect 😛, small inconvenience.