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!

[stephenh]

Thanks for keeping this issue open!

FWIW I avoided this by staying on @emotion/react v11.1.4 instead of v11.4.1, so we didn't have to go all the way back to v10.

[Andarist]

Huh, interesting that you don't face this issue with a slightly older v11 version. I would have assumed that this is an issue with any v11 version.

[stephenh]

@Andarist well, in retrospect, the older v11 really did seem to make the tsc "Interpolation vs. InterpolationWithTheme" compile error go away, but I'm still not out of the storybook emotion 10 / app emotion 11 woods yet, so maybe it was a false positive / or I had some luckily good/bad arrangement of dependencies in my node_modules. :shrug:

I swear I had it working, but a new morning, a new npm i, and now it's broken again (not the Interpolation compile error thankfully, but just storybook not booting) :-/ (and still not emotions fault)...

[Andarist]

You can fix most Storybook-relates issues with such config:

// ./.storybook/main.js
module.exports = {
  // ...
  webpackFinal(config) {
    delete config.resolve.alias['emotion-theming'];
    delete config.resolve.alias['@emotion/styled'];
    delete config.resolve.alias['@emotion/core'];
    return config;
  },
};

and by removing this using patch-package: https://github.com/emotion-js/emotion/blob/0f9c84c415fece9009a9bcd20b05afda6b5e107c/packages/core/types/index.d.ts#L82-L99

[stephenh]

Thanks @Andarist !

In my case, somehow npm decided to dedup storybook's @emotion/core@10 dependency on @emotion/cache to @emotion/cache@11 (which ended up causing https://github.com/emotion-js/emotion/issues/1826):

$ npm ls @emotion/cache
[email protected] /home/stephen/homebound/internal-frontend
├─┬ @emotion/[email protected]
│ └── @emotion/[email protected]
├─┬ @storybook/[email protected]
│ └─┬ @storybook/[email protected]
│   └─┬ @emotion/[email protected]
│     └── @emotion/[email protected] deduped invalid: "^10.0.27" from node_modules/@storybook/theming/node_modules/@emotion/core
├─┬ @storybook/[email protected]
│ └─┬ [email protected]
│   ├── @emotion/[email protected]
│   └─┬ @emotion/[email protected]
│     └── @emotion/[email protected] deduped

I've now got a working setup (without any .storybook/main.js changes) by:

a) running git clean -fdx to nuke everything, b) remove package-lock.json c) run yarn to see if it would "do the right thing" d) then run npm i to create a package-lock.json from yarn's hopefully better arrangement of node_modules e) now git clean -fdx again, but keep the package-lock.json f) npm i

And now it works. storybook's @emotion/cache is still deduped, but not to a v11 version:

$ npm ls @emotion/cache
[email protected] /home/stephen/homebound/internal-frontend
├─┬ @emotion/[email protected]
│ └── @emotion/[email protected]
├─┬ @storybook/[email protected]
│ └─┬ @storybook/[email protected]
│   └─┬ @emotion/[email protected]
│     └── @emotion/[email protected] deduped
└─┬ @storybook/[email protected]
  └─┬ [email protected]
    └── @emotion/[email protected]

I'm sure I did something wrong here, and maybe using npm to create a new lock file would have worked, but this is just what I happened to try.

[jrolfs]

My solution was to add @emotion/core/types/index.d.ts to .yarnclean ... obviously only works if you're using Yarn.

[dwjohnston]

Oh wow - it looks like I've possibly stumbled on the right place for my issue.

Just incase anyone else is searching the same things I am, the css props looks like:

(property) css?: ((string | number | boolean | ComponentSelector | Keyframes | SerializedStyles | ArrayInterpolation<undefined> | ObjectInterpolation<...> | ((theme: any) => Interpolation<...>)) & (string | ... 7 more ... | FunctionInterpolation<...>)) | null | undefined

where it should look like:

(property) css?: Interpolation<Theme>

@jrolfs solution appears to work for me.