[Bug]: setProjectAnnotations typescript error when decorators has withThemeFromJSXProvider

[aarjithn]

Describe the bug

Storybook preview.tsx is setup like this

import { withThemeFromJSXProvider } from "@storybook/addon-themes";

export const decorators = [
  withThemeFromJSXProvider({
    themes: {
      light: lightTheme,
      dark: darkTheme,
    },
    defaultTheme: "light",
    Provider: ThemeProvider,
  }),

and then in test-setup.ts

import { setProjectAnnotations } from '@storybook/react';
import * as globalStorybookConfig from './.storybook/preview'; // path of your preview.js file

setProjectAnnotations(globalStorybookConfig);

Throws below error

Argument of type 'typeof import(".storybook/preview")' is not assignable to parameter of type 'ProjectAnnotations<ReactRenderer> | ProjectAnnotations<ReactRenderer>[]'.
  Type 'typeof import(".storybook/preview")' is not assignable to type 'ProjectAnnotations<ReactRenderer>'.
    Type 'typeof import(".storybook/preview")' is not assignable to type 'BaseAnnotations<ReactRenderer, Args>'.
      Types of property 'decorators' are incompatible.
        Type 'DecoratorFunction<Renderer, Args>[]' is not assignable to type 'DecoratorFunction<ReactRenderer, { [x: string]: any; }> | DecoratorFunction<ReactRenderer, { [x: string]: any; }>[] | undefined'.
          Type 'DecoratorFunction<Renderer, Args>[]' is not assignable to type 'DecoratorFunction<ReactRenderer, { [x: string]: any; }>[]'.
            Type 'DecoratorFunction<Renderer, Args>' is not assignable to type 'DecoratorFunction<ReactRenderer, { [x: string]: any; }>'.
              Types of parameters 'c' and 'c' are incompatible.
                Type 'StoryContext<ReactRenderer, { [x: string]: any; }>' 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(2345)

To Reproduce

No response

System

Storybook Environment Info:

  System:
    OS: macOS 13.6
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 16.14.0 - ~/.nvm/versions/node/v16.14.0/bin/node
    Yarn: 1.22.15 - ~/.nvm/versions/node/v16.14.0/bin/yarn <----- active
    npm: 8.3.1 - ~/.nvm/versions/node/v16.14.0/bin/npm
  Browsers:
    Chrome: 119.0.6045.159
    Firefox: 119.0.1
    Safari: 16.6
  npmPackages:
    @storybook/addon-essentials: ^7.6.1 => 7.6.1 
    @storybook/addon-themes: ^7.6.1 => 7.6.1 
    @storybook/blocks: ^7.6.1 => 7.6.1 
    @storybook/react: ^7.6.1 => 7.6.1 
    @storybook/react-vite: ^7.6.1 => 7.6.1 
    storybook: ^7.6.1 => 7.6.1

Additional context

No response

[ShaunEvening]

Hey @aarjithn 😁

I'm just getting back from holidays so I just need a few days to get to this.

Stay tuned 📻

[emanual4real]

I'm also having the same issue. Not sure if my info is helpful:

System:
OS: Linux 5.15 Debian GNU/Linux 11 (bullseye) 11 (bullseye)
CPU: (20) x64 12th Gen Intel(R) Core(TM) i9-12900HK
Shell: 5.1.4 - /bin/bash
Binaries:
Node: 20.10.0 - /usr/local/bin/node
Yarn: 1.22.19 - /usr/local/bin/yarn
npm: 10.2.3 - /usr/local/bin/npm <----- active
pnpm: 8.14.0 - /usr/local/share/npm-global/bin/pnpm
npmPackages:
@storybook/addon-essentials: ^7.6.10 => 7.6.10
@storybook/addon-interactions: ^7.6.10 => 7.6.10
@storybook/addon-links: ^7.6.10 => 7.6.10
@storybook/addon-mdx-gfm: ^7.6.10 => 7.6.10
@storybook/addon-onboarding: ^1.0.10 => 1.0.10
@storybook/addon-themes: ^7.6.10 => 7.6.10
@storybook/blocks: ^7.6.10 => 7.6.10
@storybook/react: ^7.6.10 => 7.6.10
@storybook/react-vite: ^7.6.10 => 7.6.10
@storybook/test: ^7.6.10 => 7.6.10
eslint-plugin-storybook: ^0.6.15 => 0.6.15
storybook: ^7.6.10 => 7.6.10

[valentinpalkovic]

@integrayshaun do you have an update on this?

[yannbf]

Hey everyone! This seems to be an issue because the function from addon-themes uses a Typescript generic that should be specified once you use it, e.g.

import { withThemeFromJSXProvider } from '@storybook/addon-themes';
import { ReactRenderer } from '@storybook/react';

export const decorators = [
  withThemeFromJSXProvider<ReactRenderer>({ // <-- You have to specify the ReactRenderer
    themes: {
      light: {},
      dark: {},
    },
    defaultTheme: 'light',
  }),
];

If you do that, the problem should be gone. Here's a repro.

Regardless, we should probably improve our documentation to include this!

[aarjithn]

Thank you! confirmed adding the generic fixed the issue.