Emotion: Types of property 'css' are incompatible. Type 'InterpolationWithTheme<any>' is not assignable to type 'Interpolation<Theme>'

[Vadorequest]

Current behavior:

When using css prop with Next.js, it sometimes yields a warning about Types of property 'css' are incompatible.. (not always)

I'm confused as to why. For now, I'm // @ts-ignore all issues manually.

It happens on both svg elements and css properties.

Error:(51, 6) TS2322: Type '{ accept?: string; acceptCharset?: string; action?: string; allowFullScreen?: boolean; allowTransparency?: boolean; alt?: string; as?: string; async?: boolean; autoComplete?: string; autoFocus?: boolean; ... 356 more ...; flipModeOptions: { ...; }; }' is not assignable to type '{ css?: Interpolation<Theme>; }'.
  Types of property 'css' are incompatible.
    Type 'InterpolationWithTheme<any>' is not assignable to type 'Interpolation<Theme>'.

To reproduce:

1. git clone https://github.com/UnlyEd/next-right-now.git at-update-deps-03-31
2. cd at-update-deps-03-31 && git checkout at-update-deps-03-31
3. cp .env.local.example .env.local - Uses the default ENV variables when running locally
4. yarn
5. yarn start
6. Open http://localhost:8888

PR: https://github.com/UnlyEd/next-right-now/pull/304

Expected behavior:

It should't issue an error.

Environment information:

"@emotion/react": "11.1.5",
"@emotion/styled": "11.1.5",
"react": "17.0.2",

[vadistic]

I'm just dealing with the same issue.

It seems the issue is a mismatch between Interpolation<Theme> from emotion 11 @emotion/react and InterpolationWithTheme<Theme> from emotion 10 @emotion/core that also provides globals to JSX css prop.

It may be happening because storybook depends on emotion 10 so you have it installed.

My fix is to do patch-package and comment-out those few lines (82-100) dealing with globals from @emotion/core/types/index.d.ts

[Vadorequest]

Yeah, it sounds legit, as I use other libs that are still using Emotion 10. (like StoryBook indeed)

My fix is to do patch-package and comment-out those few lines

You mean you edit the installed packages within node_modules by hand? That won't work for me because CI/CD builds won't do that and it'll fail during build due to TS error, so my best course of action is still to @ts-ignore those.

[michaeljaltamirano]

Yeah, it sounds legit, as I use other libs that are still using Emotion 10. (like StoryBook indeed)

My fix is to do patch-package and comment-out those few lines

You mean you edit the installed packages within node_modules by hand? That won't work for me because CI/CD builds won't do that and it'll fail during build due to TS error, so my best course of action is still to @ts-ignore those.

I was able to get around this in a Storybook repo by using paths in tsconfig.json for the stories directory. Maybe this will help you: https://github.com/curology/radiance-ui/pull/550/commits/70caef01a6e550ac2167ddc161bfeb1744f6241d#diff-9f2f153e2e66180524e5c8dff6501791010c150b089485a548c2c92270b00f5eR6-R10

[Andarist]

This sounds like an issue with Storybook (since it's still on Emotion 10). Not much that we can do about it here.

[vadistic]

You mean you edit the installed packages within node_modules by hand? That won't work for me because CI/CD builds won't do that and it'll fail during build due to TS error, so my best course of action is still to @ts-ignore those.

Yep, but then you're creating a (git) patch that is applied there in any next install - eg on CI.

This can be done with patch-package tool:

https://www.npmjs.com/package/patch-package

Or you can use yarn 2 patch protocol(if you're using it):
https://yarnpkg.com/cli/patch
https://yarnpkg.com/cli/patch-commit
https://yarnpkg.com/features/protocols#patch

[Vadorequest]

@Andarist Agreed, nothing to be done from Emotion standpoint besides having a dedicated thread with work arounds and explanations. I guess we should just keep this issue opened until it's solved, it'll help people looking for a workaround until then.

@vadistic Thanks for the workaround, I wasn't aware that kind of patching was possible, great to know!