storybook: @storybook/theming causes type errors during tsc

Describe the bug Ok this is a fun one. Basically tsc complains about missing react typings, when trying to use create of @storybook/theming. This is because:

@storybook/theming imports @emotion/*
which in turn imports react
which in turn requires @types/react
which would have to be installed manually
which would then declare global JSX namespace
which would then conflict with the JSX namespace of Vue

To Reproduce

create Vue project with TS support via Vue CLI 3
Storybook via vue-cli-plugin-storybook (TS conversion and config must be done by hand)
Vue JSX/TSX typings -> https://github.com/vuejs/vue-cli/blob/dev/packages/%40vue/cli-plugin-typescript/generator/template/src/shims-tsx.d.ts
Create theme:

import { create } from '@storybook/theming';

export default create({
  base: 'light',
  brandTitle: 'My Storybook',
});

npx tsc

Expected behavior Use create from @storybook/theming without requiring react typings and therefore no JSX namespace conflicts.

System:

OS: any
Device: any
Browser: any
Framework: vue
Version: 5

Additional context Workaround:

dont use storybook theming
or dont use vue jsx/tsx
or run tsc with --skipLibCheck

Solution:

provide a create theme function/module that does not use @emotion/*
the only stuff that create requires from @emotion/* is import { css, keyframes } from '@emotion/core'; in animation.ts)
where css type doesnt require react typings (so no problem here), but is imported from @emotion/core types, which imports react typings for other stuff (this is a problem) -> import css from @emotion/css
where keyframes type doesnt require react typings (so no problem here), but its type is declared in @emotion/core type declaration file that imports react typings, but actually dont use react typings for keyframes itself (but for other stuff) -> ask for upstream change in emotion (which would maybe require some reorganisation of types/exports on their part) or reimplement/c&p keyframes into @storybook/theming or dont use keyframes during create

About this issue

Original URL
State: closed
Created 5 years ago
Reactions: 10
Comments: 20 (14 by maintainers)

Most upvoted comments

still relevant

backbone87 on Aug 1, 2019

@shilman it looks like the @storybook/theming package doesn’t cause TS + JSX conflicts.

However it seems the @storybook/knobs package causes this issue still as it ships @types/react-color. I’m unsure if this is intentional.

The above causes the @types/react package to be installed when using the @storybook/knobs package. If the knobs addon can ship without this types dependency then this should resolve the Vue + TSX issues.

blake-newman on May 28, 2020

Still have problem with JSX type conflicts, when i write stories like this:

import { Story } from '@storybook/vue';

const Template: Story = (args, { argTypes }) => ({
  components: { Card },
  props: Object.keys(argTypes),
  template: '<Card v-bind="$props" />',
});

export const Default = Template.bind({});
Default.args = {
  title: 'MyTitle',
};

@storybook/vue imported react JSX types

yandongxu on Sep 6, 2021

@backbone87 try:

import { create } from '@storybook/theming/create';

Does that solve the issue?

ndelangen on Jul 11, 2019