Search code examples
reactjstypescriptmaterial-uiyarnpkgyarnpkg-v2

yarn 2 upgrade appears to have broke typescript types, where yarn 1 install of same project succeeds?

I have been trying to upgrade a typescript monorepo to make use of yarn 2 but am running into an issue where typescript is no longer able to determine certain react props. Since this was working in yarn 1.x, I am thinking there must have been some implicit dependencies being added in yarn 1.x that have to be explicitly defined in yarn 2.x? After hours of looking at project dependencies and node_modules I couldn't determine what needed to change in the production repo and so I created a sample project to reproduce the issue. Hopefully someone is able to point out what I'm missing.

/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 };

/apps/ts-example/App.jsx

import { Button } from "components";

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

export default App;

When everything has been installed via yarn 1.x, I can hover over the "name" prop and receive type information as shown below. Additionally, if a prop value is supplied that is not "alice" or "bob" you receive a type error like one would expect.

enter image description here

After installing via yarn 2.x, when I hover over the "name" prop I just get a "string" type (shown below). Additionally, typescript never gives any error for the prop even if what's supplied is not "alice" or "bob". Which makes sense since typescript appears to no longer understand the type definition.

enter image description here

I have observed that I can get type information back for the "name" prop if I remove the type intersection with the MuiButtonProps in the lib/components/Button.jsx file. However this has the results of the type not knowing about the "base" props from the underlying Material-UI button. Below is the modified type definition.

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

Which results in the following:

enter image description here

I'm hoping the problem is obvious based on what I outlined above, but if it's not sufficient, here's the sample repo that reproduces the issue. https://github.com/jereklas/ts-example

  • the "main" branch is the yarn 1.x install that is working.
  • the "yarn2" branch is the yarn 2.x install that is not working.
Solution

  • It turns out that my yarn.lock file had been deleted and regenerated with a different @material-ui/types version which was causing all my problems. It needed to be 5.1.0 and was instead 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