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

[clayrisser]

I am getting the following error when using this plugin.

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

I am using . . .

{
    "@storybook/react": "^6.3.12",
    "@react-theming/storybook-addon": "^1.1.3"
}

[austinmccalley]

I am also having this error. I am using...

{
    "@storybook/react": "^6.4.9",
    "@react-theming/storybook-addon": "^1.1.3"
}

I am using it with MUIv5 and I am defining my preview.js as follows

// preview.js
import { theme as OverallTheme } from '../src/theme';

import { createTheme } from '@mui/material/styles';
import { ThemeProvider } from '@mui/material';
import { withThemes } from '@react-theming/storybook-addon';

const providerFn = ({ theme, children }) => {
  const muTheme = createTheme(theme);
  return <ThemeProvider theme={muTheme}>{children}</ThemeProvider>;
};

export const decorators = [withThemes(null, [OverallTheme], { providerFn })];
export const parameters = { docs: { source: { type: 'code' } } };

[Myzel394]

Another one facing the same issue, any progress on this? @austinmccalley and @clayrisser did you find a solution?

[austinmccalley]

Another one facing the same issue, any progress on this?

@austinmccalley and @clayrisser did you find a solution?

No solution yet ☹️

[totszwai]

Same issue... what's more is that, there is no proper export from the addon... Is this thing still being maintained??

[majoncas-ue]

The plugin looks so nice but I cannot use it because of this issue. Any workaround that would help?

[oriooctopus]

@usulpro we could very much use your assistance

[usulpro]

@totszwai This addon is being maintained. Not sure TS definition is related to this issue, but anyway PRs with fixes are always welcomed

[Mattias-Martens]

Same problem here. From a preliminary look it seems that context is not being passed in like it is in other decorators. Anything that relies on storybook context, like useArgs(), triggers the bug.

[Mattias-Martens]

could be related to this issue——https://github.com/storybookjs/storybook/issues/12006

basically the decorator renders it like this:

<>{providerFn({ theme, children })}</>

making that internal react JSX the “root” of the story as far as Storybook is concerned. Storybook doesn’t allow the use of any of its cool toys less than one level deep into a component tree. so this is what breaks it.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.