reactjs - uppgradering till yarn 2 verkar ha brutit TypeScript-typer, där yarn 1-installation av samma projekt lyckas?

Jag har försökt uppgradera ett TypeScript-monorepo för att använda Yarn 2, men stöter på ett problem där TypeScript inte längre kan bestämma vissa React-props. Eftersom detta fungerade i Yarn 1.x, tänker jag att det måste ha funnits vissa implicita beroenden som lades till i Yarn 1.x som måste definieras uttryckligen i Yarn 2.x? Efter timmar av att ha tittat på projektberoenden och node_modules kunde jag inte avgöra vad som behövde ändras i produktionsrepoet, så jag skapade ett exempelprojekt för att återskapa problemet. Förhoppningsvis kan någon peka ut vad jag missar.

/lib/component/Button.tsx

import React from "react";
import { Button as MuiButton, ButtonProps as MuiButtonProps } from "@material-ui/core";

type ButtonProps = {
  name: "alice" | "bob";
} & MuiButtonProps;

const Button = React.forwardRef<HTMLButtonElement, ButtonProps>((props: ButtonProps, ref) => {
  const { name, ...other } = props;
  return <MuiButton ref={ref} {...other}>hello {name}, click me</MuiButton>;
});

export default Button;
export type { ButtonProps };

/appar/ts-exempel/App.jsx

import { Button } from "components";

const App = () => {
  return <Button name="bob" variant="outlined" />;
};

export default App;

När allt har installerats via yarn 1.x kan jag hovra över "name"-prop och få typinformation som visas nedan. Dessutom, om ett prop-värde anges som inte är "alice" eller "bob", får du ett typpfel som man skulle förvänta sig.

Efter att ha installerat via yarn 2.x, när jag hovrar över "name"-prop:en får jag bara en "string"-typ (visas nedan). Dessutom ger TypeScript aldrig något fel för prop:en även om det som tillhandahålls inte är "alice" eller "bob". Vilket är logiskt eftersom TypeScript inte längre verkar förstå typdefinitionen.

Jag har observerat att jag kan få typinformation tillbaka för "name"-egenskapen om jag tar bort typintersectionen med MuiButtonProps i lib/components/Button.jsx-filen. Detta resulterar dock i att typen inte känner till "base"-egenskaperna från den underliggande Material-UI-knappen. Nedan är den modifierade typdefinitionen.

type ButtonProps = {
  name: "alice" | "bob";
};

Vilket resulterar i följande:

Jag hoppas att problemet är uppenbart baserat på vad jag har beskrivit ovan, men om det inte är tillräckligt, här är exempelrepoet som reproducerar problemet. https://github.com/jereklas/ts-example

• "main"-grenen är Yarn 1.x-installationen som fungerar.
• grenen "yarn2" är yarn 2.x-installationen som inte fungerar.

Svar #1

Det visar sig att min yarn.lock-fil hade blivit borttagen och regenererad med en annan @material-ui/types-version vilket orsakade alla mina problem. Den behövde vara 5.1.0 men var istället 5.1.8

- "@material-ui/types@^5.1.0":
-   version "5.1.0"
-   resolved "https://registry.yarnpkg.com/@material-ui/types/-/types-5.1.0.tgz#efa1c7a0b0eaa4c7c87ac0390445f0f88b0d88f2"
-   integrity sha512-7cqRjrY50b8QzRSYyhSpx4WRw2YuO0KKIGQEVk5J8uoz2BanawykgZGoWEqKm7pVIbzFDN0SpPcVV4IhOFkl8A==
+ "@material-ui/types@npm:^5.1.0":
+   version: 5.1.8
+   resolution: "@material-ui/types@npm:5.1.8"
+   peerDependencies:
+     "@types/react": "*"
+   peerDependenciesMeta:
+     "@types/react":
+       optional: true
+   checksum: 543af1b4c0ba8c62f6b4a7f64fd17c8b705c4942c62d4971604e07bb207b834fe7bda97f31d223dc448f66673eb39ceb80b151ddb5ad076506fe515360d572ea
+   languageName: node
+   linkType: hard