[Bug]: @storybook/addon-themes conflicting types with core storybook in preview.tsx

[binaryartifex]

Describe the bug

Get type errors when attempting to export a decorators array with a withThemeByDataAttribute decorator (straight from the docs)

To Reproduce

Install and add the following plugins

1. @storybook/addon-themes
2. @storybook/react (unrelated to this bug, but i actually use nextjs however the @storybook/nextjs renderer doesn't export the below types so im forced to download @storybook/react just for these two typings)

Copy paste the following snippet into your preview.tsx file

import { withThemeByDataAttribute } from "@storybook/addon-themes";
import { Decorator, Parameters } from "@storybook/react";

export const decorators: Decorator[] = [
  withThemeByDataAttribute({
    themes: {
      light: "light",
      dark: "dark",
    },
    defaultTheme: "light",
    attributeName: "data-mode",
  }),
];

System

System:
    OS: Windows 11 10.0.22000
    CPU: (24) x64 AMD Ryzen 9 3900X 12-Core Processor
  Binaries:
    Node: 20.9.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.21 - C:\Program Files\nodejs\yarn.CMD
    npm: 10.1.0 - C:\Program Files\nodejs\npm.CMD
    pnpm: 8.14.1 - C:\Program Files\nodejs\pnpm.CMD <----- active
  Browsers:
    Edge: Spartan (44.22000.120.0), Chromium (120.0.2210.144)
  npmPackages:
    @storybook/addon-a11y: ^7.6.9 => 7.6.9
    @storybook/addon-essentials: ^7.6.9 => 7.6.9
    @storybook/addon-interactions: ^7.6.9 => 7.6.9
    @storybook/addon-themes: ^7.6.9 => 7.6.9
    @storybook/core-server: ^7.6.9 => 7.6.9
    @storybook/jest: ^0.2.3 => 0.2.3
    @storybook/nextjs: ^7.6.9 => 7.6.9
    @storybook/react: ^7.6.9 => 7.6.9
    @storybook/test-runner: ^0.16.0 => 0.16.0
    @storybook/testing-library: ^0.2.2 => 0.2.2

Additional context

The following type error is generated from the above issue

Type 'DecoratorFunction<Renderer, Args>' is not assignable to type 'Decorator'.
  Types of parameters 'c' and 'c' are incompatible.
    Type 'StoryContext<ReactRenderer, StrictArgs>' is not assignable to type 'StoryContext<Renderer, Args>'.
      Types of property 'originalStoryFn' are incompatible.
        Type 'StoryFn<ReactRenderer, Args>' is not assignable to type 'StoryFn<Renderer, Args>'.
          Type 'LegacyStoryFn<ReactRenderer, Args>' is not assignable to type 'StoryFn<Renderer, Args>'.
            Type 'LegacyStoryFn<ReactRenderer, Args>' is not assignable to type 'LegacyStoryFn<Renderer, Args>'.
              Types of parameters 'context' and 'context' are incompatible.
                Type 'StoryContext<Renderer, Args>' is not assignable to type 'StoryContext<ReactRenderer, Args>'.
                  Types of property 'canvasElement' are incompatible.
                    Type 'unknown' is not assignable to type 'HTMLElement'.ts(2322)

[valentinpalkovic]

@Integrayshaun any idea?

[pal-anish]

Hi @binaryartifex There are multiple preview.tsx present in the whole code can you please be more precise with the path to which file you are referring to? Also by referring to "Install and add the following plugins" where we need to install those can you help me? Like in the main root folder or the sandbox folder.

[hayk94]

Have same issue with withThemeFromJSXProvider. Only did npx storybook@latest add @storybook/addon-themes and imported my themes

import type { Preview } from "@storybook/react";

import { CssBaseline, ThemeProvider } from "@mui/material";
import { withThemeFromJSXProvider } from "@storybook/addon-themes";

import { myMUICustomTheme} from "path/to/theme";
import { myOtherMUICustomTheme } from "path/to/other/theme";

const preview: Preview = {
  parameters: {
    actions: { argTypesRegex: "^on[A-Z].*" },
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/i,
      },
    },
  },

  decorators: [
    withThemeFromJSXProvider({
      GlobalStyles: CssBaseline,
      Provider: ThemeProvider,
      themes: {
        // Provide your custom themes here
        custom: myMUICustomTheme,
        otherCustom: myOtherMUICustomTheme,
      },
      defaultTheme: "custom",
    }),
  ],
};

export default preview;

Storybook versions

    "@storybook/addon-essentials": "^7.6.12",

    "@storybook/addon-interactions": "^7.6.12",

    "@storybook/addon-links": "^7.6.12",

    "@storybook/addon-onboarding": "1.0.11",

    "@storybook/addon-themes": "7.6.12",

    "@storybook/blocks": "^7.6.12",

    "@storybook/react": "^7.6.12",

    "@storybook/react-vite": "^7.6.12",

    "@storybook/test": "^7.6.12",

    "storybook": "^7.6.12",

MUI versions

"@mui/material": "^5.14.15",

[snaka]

I believe this fix is a temporary solution before addressing the underlying issue, but at least in my project, the type-related errors are no longer being outputted due to the following fix.

• https://github.com/storybookjs/storybook/pull/26042

This fix is included in v7.6.16 .