I have been using "@emotion/styled": "11.10.5", and didn't have any problem, but since I started using the Twilio library "@twilio/flex-webchat-ui": "^2.9.1", now the terminal is full of errors like this ones: (error logs picture)
error TS2322: Type 'SerializedStyles' is not assignable to type '((string | number | boolean | ComponentSelector | Keyframes | SerializedStyles | ArrayInterpolation<undefined> | ObjectInterpolation<...> | ((theme: any) => Interpolation)) & (string | ... 7 more ... | FunctionInterpolation<...>) & (string | ... 5 more ... | ClassInterpolation)) | null | undefined'. Type 'SerializedStyles' is not assignable to type '((theme: any) => Interpolation) & FunctionInterpolation<Theme> & CSSObject'. Type 'SerializedStyles' is not assignable to type '(theme: any) => Interpolation'. Type 'SerializedStyles' provides no match for the signature '(theme: any): Interpolation'. <Span css={value}>{copy}</Span> node_modules/@emotion/core/types/index.d.ts:96:7 css?: InterpolationWithTheme<any> The expected type comes from property 'css' which is declared here on type 'IntrinsicAttributes & { css?: Interpolation<Theme>; } & { theme?: Theme | undefined; as?: ElementType<any> | undefined; } & ClassAttributes<...> & HTMLAttributes<...> & { ...; }'
As I noticed, Twilio is also using emotion but different packages and versions (deprecated ones):
"create-emotion-styled": "^9.2.6",
"emotion-theming": "9.2.6",
"react-emotion": "9.2.6",
"emotion": "9.2.6",
I tried to solve this peer dependencies clash by adding in the "resolutions" section of my project's package.json the emotion versions, (and the React and React Dom versions as told here How can I avoid a TypeScript error with FlexPlugins?) but it didn't solve the problem: (resolutions section of my package.json picture)