Emotion: Components created with CreateStyled<Theme> type incorrectly expects a `theme` prop

[lewisl9029]

Current behavior:

Recently upgraded to emotion 10 from 9, and ran into this issue with theme typing following the official recommended way to type themes using the CreateStyled type: https://emotion.sh/docs/typescript#define-a-theme

Here's a minimal repro I created from the standard React TypeScript sandbox:

https://codesandbox.io/embed/emotion-bug-typescript-required-theme-prop-jqdo9

Property 'theme' is missing in type '{ children: Element; }' but required in type '{ theme: { primaryColor: string; }; }'.ts(2741)

To reproduce:

1. Open the sandbox: https://codesandbox.io/embed/emotion-bug-typescript-required-theme-prop-jqdo9
2. Click "Open in Editor" on the top right (for some reason type errors don't show up in the default view)
3. Hover over <Themed>

Expected behavior:

No type errors. Themed doesn't actually accept a required theme prop. theme is something that gets injected by the internal context consumer, not exposed as a part of the component API.

Environment information:

• react version: 16.8.4
• emotion version: 10.0.14

I made a temporary workaround here to unblock our upgrade: https://github.com/lewisl9029/emotion/pull/1/files

That addresses the symptom of the issue, but I had a really difficult type following the typings here and so I'm not sure about the ramifications of the change I made or whether it's a good fix at all.

Let me know if there's anything else I can do to help!

[Andarist]

I can confirm that this fails on codesandbox, but I cannot reproduce this in our repository. This prop is explicitly marked as optional here and this hasn't changed for last 9 months. Could you maybe check different versions of TS on that simplified repro case to see if it fails on all of them or only on some?

[panvourtsis]

i have the same issue while upgrading from 10.0.10

[lewisl9029]

@Andarist The typescript version used in the sandbox is 3.3.3, and the one used in our repo is 3.5.3 so I don't think it's isolated to a specific version.

This error only occurs when using styled as CreateStyled<typeof theme> to specify types for the theme being used, not when using styled directly.

I tried to follow the type CreateStyled down the chain and eventually reached this: https://github.com/emotion-js/emotion/blob/master/packages/styled-base/types/index.d.ts#L33

Changing the theme: there to theme?: seems to resolve the issue but I'm not sure what other implications that might have.

[Andarist]

Changing the theme: there to theme?: seems to resolve the issue but I'm not sure what other implications that might have.

That's weird - this is used only to provide theme prop INSIDE of the interpolated functions, not to expect it as required on the returned component.

Could you try adding a failing type test inside this repository? That would help a lot.

[joshuajhun]

I'm running into this issue as well.
I just upgraded to typescript to 3.5.3 from 2.9.2. Prior to the upgrade, everything was running fine. Which is interesting because like @Andarist mentioned the prop should be optional.

[gersomvg]

I also had this issue. Tracked it down to this scenario:

// Bar.js
const Bar = styled('div')``;

// Foo.tsx
const Foo = styled(Bar)``;

Once I changed Bar to also be a typescript file, the error went away. Is this by any chance also your situation @joshuajhun @lewisl9029 ? Can't really help further; started on Typescript today by migrating my portfolio website.

[joshuajhun]

@grsmvg My issue is happening more when I'm defining a theme. Even though the theme is typed correctly it's still expecting a theme prop. I've noticed this issue happens on any version of typescript that is greater than 3.1 +.

What I find interesting is that even if I type theme with an optional theme prop typescript still yells at me.

[gersomvg]

@joshuajhun Yes, I also had a theme defined, using that manual ;) Also on the newest typescript. I solved the issue by migrating all non-TS files to TS files using the styled function from export default styled as CreateStyled<Theme>

[joshuajhun]

@grsmvg well it looks like we're doing the same thing and it's still expecting a prop on my end. ¯_(ツ)_/¯

[rynbyjn]

I work with @joshuajhun and I was able to get past this by:

1. upgrading to latest version 10.0.15
2. after that I saw quite a few less of these theme errors

3. remaining errors were due to using a variable that was typed as any like:

   const sharedDefaultStyles: any = {
   '& p': {
     ...rules,
   },
   }
   
   const sharedThemedStyles: any = ({ theme }) => ({
   '& svg': {
     fill: theme.textLight,
   },
   })
   
   const Div = styled.div(sharedDefaultStyles, sharedThemedStyles)
   

   which threw the Property 'theme' is missing in type... on my Div component.

4. Removing the : any I got a different error Argument of type ... is not assignable to parameter of type 'TemplateStringsArray' on sharedDefaultStyles being passed to styled.div.

5. I rummaged around for a bit trying to find an export to type sharedDefaultStyles as a TemplateStringsArray, but couldn't find one, so I ended removing the any and dropped in a // @ts-ignore above the Div:

   const sharedDefaultStyles = {
   '& p': {
     ...rules,
   },
   }
   
   const sharedThemedStyles = ({ theme }) => ({
   '& svg': {
     fill: theme.textLight,
   },
   })
   
   // @ts-ignore
   const Div = styled.div(sharedDefaultStyles, sharedThemedStyles)
   

Another solve for this is to just remove the const sharedDefaultStyles all together and pass the object directly through styled.div.

Is there a type definition for TemplageStringsArray that is exported somewhere to be used for a case like this? I didn't see one exported when searching through the project. Hopefully this helps someone out.

[gyss]

Same problem here. These are my dependencies:

"emotion": "10.0.17",
"emotion-theming": "10.0.19",
"react": "16.8.6",
"react-dates": "21.1.0",
"react-dom": "16.8.6",
"react-emotion": "10.0.0",
"typescript": "3.5.1",

Property 'theme' is missing in type '{ children: Element[]; }' but required in type '{ theme: object; }'

Apart from that, using the fork proposed by @lewisl9029, I still have an error when trying to get the theme variable. Example:

const Main = styled.div`
  background-color: ${props => props.theme.generalBackgroundColor};
`

results in a: Property 'generalBackgroundColor' does not exist on type 'object'

[Andarist]

@gyss
that's because you didn't type your theme - right now you need to create a custom styled instance to get it to work.

Typings are currently getting a serious makeover in https://github.com/emotion-js/emotion/pull/1501 and we plan to rethink how the theme can be typed. Closing this to clear up the issue tracker, but if you are interested in this please follow that PR, give your feedback if necessary and stay tuned for upcoming changes!

[JakeGinnivan]

Pretty sure this is solved by #1501 as @Andarist said, have also updated the docs around creating the themed types. Please give the types in my PR a spin otherwise it should be sorted once they are released.

[mbrochh]

I ran into this issue as well now. I updated to all the latest versions:

"react-emotion": "^10.0.0",
"@emotion/babel-preset-css-prop": "^10.0.27",
"@emotion/core": "^10.0.28",
"@emotion/styled": "^10.0.27", 

Then I have a styled.tsx which looks like this:

import styled, { CreateStyled } from '@emotion/styled'
import theme from './theme'

export type ThemeType = typeof theme

export default styled as CreateStyled<ThemeType>

In my files, I obviously import from my own styled.tsx:

import styled from '../../styled'

const Container = styled.div(props => ({
  width: '100%',
  backgroundColor: props.theme.colors.grays.grayLight,
}))

And I'm getting the error mentioned by OP.

[JakeGinnivan]

All my type changes are in v11 unfortunately because of some breaking changes. I am using v11 in production with no issues at the moment. So maybe give @next a go?

[mbrochh]

Sure, will do, thanks for the quick reply!
Any other backwards incompatible changes that I need to be aware of when moving to v11?

(EDIT: so far I have found this: https://github.com/emotion-js/emotion/pull/1600/files#diff-45a73696bb57e517a2dedcb0904ad4d2R22)

[Andarist]

@mbrochh there are really not that many breaking changes. You can read through all changes by browsing .md files in the .changeset directory here: https://github.com/emotion-js/emotion/pull/1600/files?file-filters%5B%5D=.md

[feychenie]

Same issue also when upgrading Typescript from 3.7 to 3.8, had to go back to 3.7.5
@mbrochh what version of TS are you using?

[mbrochh]

OK, I updated to @next, in case anyone else finds this thread in a similar situation, here is what I did:

yarn add @emotion/react@next
yarn add @emotion/styled@next
yarn add @emotion/babel-preset-css-prop@next
yarn add react-emotion@next

I removed a few things from package.json:

@emotion/core
emotion-theming
storybook-addon-emotion-theme

Then I replaced emotion with @emotion in .babelrc and changed the autoLabel option from true to never.

Next, I replaced @emotion/core with @emotion/react in the entire project.

For Storybook, I created a custom withThemeProvider decorator and then used my custom decorator instead of the storybook-addon-emotion-theme (I'm sure sooner or later that plugin will be updated):

import * as React from 'react'
import { ThemeProvider } from '@emotion/react'

import theme from '../src/theme'

export const withThemeProvider = () => story => {
  return <ThemeProvider theme={theme}>{story()}</ThemeProvider>
}

I had a custom styled.tsx file in my project in order to get Typescript autocompletion for my theme, that file is now deleted. Instead, I now have a typings/emotion.d.ts file with the following content:

import '@emotion/react'

import theme from '../theme'

export type ThemeType = typeof theme

declare module '@emotion/react' {
  export interface Theme extends ThemeType {}
}

Finally I replaced all my import styled from '../../styled' imports with good old import styled from '@emotion/styled'.

I think that was it... went pretty smoothly! ~45 minutes of work.

[JakeGinnivan]

Same issue also when upgrading Typescript from 3.7 to 3.8, had to go back to 3.7.5

v11 we have used with 3.9 beta with no issues. I fixed a whole heap of generic / typesafety and performance issues in v11.

You should also find your compilation time drops nicely too with the v11 upgrade. We went from ~60seconds to ~30 seconds on our project with the new types

[mbrochh]

Oh boy. I tried to migrate another project of ours to emotion 11, which has essentially the same setup as the one I migrated earlier, but slightly different package versions for everything, and that failed.

Even when I just render <div>Hello</div> and remove all imports from my main App.tsx, I keep getting this warning in the console:

.../src/node_modules/@emotion/cache/dist/cache.browser.esm.js:87 Uncaught TypeError: Cannot read property 'key' of undefined

at createCache (.../src/node_modules/@emotion/cache/dist/cache.browser.esm.js:87)

I know that this is not enough information to help, just a long shot in the hopes that someone here has seen this error before and can drop a hint while I'm sleeping ;)

[kyle-mccarthy]

@mbrochh try removing your node_modules folder and installing with yarn

[Andarist]

@mbrochh you might have not upgraded @emotion/react

[RoystonS]

So, just to make sure I understand the implications here clearly, Emotion v10 theme typing only works with TypeScript up to v3.7, and Emotion v11's does work with TypeScript v3.9, but it hasn't been released yet?

[Andarist]

@RoystonS the nature of this problem eludes me - we have quite complex types, especially in v10. If I knew how to fix it - I would do it. The typings for v11 are way easier to reason about and we plan to release v11 as stable soon-ish. I've been working on final touches in the past days - we regularly~ have been publishing prereleases of v11 and I encourage you to try using it.

If you know how to fix this problem in v10 - I'm also all ears.

[RoystonS]

Yeah, I'm pretty lost as to what's going on with the types. If v11 is coming 'soon', investigating the v10 types isn't going to be worthwhile.

[JakeGinnivan]

Yeah, I don't think it's worth trying to backport the fix, the v11 types include breaking changes to fix issues like this and a few others.

If you are interested I did blog about a lot of the types and how they work at https://medium.com/pixel-and-ink/understanding-and-improving-emotion-10s-typescript-types-622e2d172f6f

[JakeGinnivan]

FWIW 7news.com.au, thewest.com.au and perthnow.com.au have all been running v11 in production for months. Upgrades have been easy, just need to follow when things have moved between packages.

[RoystonS]

@JakeGinnivan Thank you _very_ much for that. That's extremely helpful. I'm now in the process of updating to v11. We have custom stylis plugins (and that API has changed completely) and a whole bunch of exciting stuff so it's a fairly non-trivial migration. I had been trying to upgrade TypeScript to 3.9 too to try to get some perf improvements but I'll do Emotion separately first, I think. Thanks again, all.

[JakeGinnivan]

The initial upgrade was a a fair bit of work for us, but well worth it. v10 to v11 dropped our compile time from over 1minute to about 30 seconds.

@RoystonS if there are particular issues let us know, my upgrades were pretty incremental as I worked through issues with the new types. There may be obvious code mods or tips we can give to ease the migration for you, or others doing the migration once released.

[Andarist]

@RoystonS if u need some help with rewriting ur stylis plugins i might be able to help with that as well

[RoystonS]

@RoystonS if u need some help with rewriting ur stylis plugins i might be able to help with that as well

@Andarist Yeah, maybe. This bug might not be the best place for that though. (Any suggestions as to where?) I have two existing stylis plugins for doing some styling simulation and for doing some RTL work, both of which just take context and content. We used context values of 1 and 2 previously. Looks like I'll need to look at type and value and set return instead?

[Andarist]

Yes, this sounds like a good direction. U can reach out to me on our Slack or on Twitter