@dbismut I’m glad that helped.

Upon further research, it appears that the issue is resolved in Emotion 11. However Storybook uses Emotion 10.

UPDATE

Having had to deal with this again, I can confirm that @derekr’s solution below of routing to an empty *.d.ts file is the best and easiest approach.

The Fix

Here’s the less-than-ideal but better than patch-package fix:

Step 1: Install Emotion 11

yarn add --dev @emotion/react

Step 2: Force Storybook to use Emotion 11

Force @emotion/core to use your updated @emotion/react by adding this in tsconfig.json:

{
   "paths": {
      "@emotion/core": ["node_modules/@emotion/react"]
    }
}

Step 3: ???

Step 4: Profit!

Not sure what the implications here are in most scenarios (I’m just using storybook), but this workaround is effective without installing @emotion/react. You can route to an empty files.

{
  "compilerOptions": {
    "paths": {
      "@emotion/core": ["./typings/index.d.ts"]
    }
  }
}

// cribbed from stitches/design-system
import type * as Polymorphic from '@radix-ui/react-polymorphic'
import React from 'react'

import { styled, CSS, StitchesVariants } from '../../stitches.config'

const DEFAULT_TAG = 'span'

export const StyledText = styled(DEFAULT_TAG, {
	// reset
	lineHeight: 1,
	margin: '0',
	fontWeight: 400,
	fontVariantNumeric: 'tabular-nums',
	display: 'block',
	fontFamily: '$body',

	variants: {
		size: {
			1: {
				fontSize: '$1',
			},
			2: {
				fontSize: '$2',
			},
			3: {
				fontSize: '$3',
			},
			4: {
				fontSize: '$4',
			},
		},
		weight: {
			regular: {
				fontWeight: '$regular',
			},
			medium: {
				fontWeight: '$medium',
			},
		},
		variant: {
			gray: {
				color: '$gray950',
			},
			purple: {
				color: '$purple700',
			},
		},
	},

	defaultVariants: {
		size: '4',
		variant: 'gray',
		weight: 'regular',
	},
})

type TextCSSProp = { css?: CSS }
type TextVariants = StitchesVariants<typeof StyledText>
type TextOwnProps = TextCSSProp & TextVariants

type TextComponent = Polymorphic.ForwardRefComponent<
	typeof DEFAULT_TAG,
	TextOwnProps
>

export const Text = React.forwardRef((props, forwardedRef) => {
	return <StyledText {...props} ref={forwardedRef} />
}) as TextComponent

Text.toString = () => `.${StyledText.className}`

@julianbenegas thanks for raising this. in the works ⚙️

Perfect! Thanks a lot!

That’s what I thought, it used to work pre-canary (see my first post). But it doesn’t now (at least this morning). I’ll paste the type error in an hour or so.