emotion-js / emotion

👩‍🎤 CSS-in-JS library designed for high performance style composition
https://emotion.sh/
MIT License
17.5k stars 1.11k forks source link

Props not assignable to `LibraryManagedAttributes` type error #3261

Open shawnrivers opened 1 month ago

shawnrivers commented 1 month ago

Current behavior:

After updating @emotion/react to 11.13.3, I start seeing the following type error in HOC (higher-order components):

src/hoc.tsx:7:13 - error TS2322: Type 'P' is not assignable to type 'IntrinsicAttributes & LibraryManagedAttributes<FC<P>, P>'.
  Type 'Record<string, unknown>' is not assignable to type 'IntrinsicAttributes & LibraryManagedAttributes<FC<P>, P>'.
    Type 'Record<string, unknown>' is not assignable to type 'LibraryManagedAttributes<FC<P>, P>'.
      Type 'P' is not assignable to type 'LibraryManagedAttributes<FC<P>, P>'.
        Type 'Record<string, unknown>' is not assignable to type 'LibraryManagedAttributes<FC<P>, P>'.

7     return <C {...props} />;
              ~

Found 1 error in src/hoc.tsx:7

Here is the code that produces this type error above:

const Component: React.FC<{ children: React.ReactNode }> = ({ children }) => {
  return <div>{children}</div>;
};

export const hoc = <P extends Record<string, unknown>>(C: React.FC<P>) => {
  return (props: P) => {
    return <C {...props} />;
  };
};

hoc(Component);

After downgrading @emotion/react to 11.13.0, the error stops appearing anymore.

To reproduce:

  1. Clone this repository for reproduction: https://github.com/shawnrivers/emotion-react-hoc-type-error
  2. Run npm i
  3. Run npm run type-check

Expected behavior:

No type error inside the HOC (which is the behavior before @emotion.react@11.13.3.

Environment information:

ENvironmentSet commented 1 month ago

Duplicated: #3245

kenshanta commented 2 weeks ago

@shawnrivers shall we close this?

shawnrivers commented 2 weeks ago

@kenshanta No problem.