I'm trying to migrate from yarn to pnpm but I've hit a bit of an issue and I'm not sure where to go with it. I haven't tried changing the settings around hoisting yet (I'd prefer not to if possible), but I'm trying to understand why this is causing me a problem.
I've got a small utility function which works fine when using yarn:
import { makeStyles } from '@material-ui/core';
export const useAlertConfigurationNameStyles = makeStyles((theme) => ({
name: {
fontWeight: theme.typography.fontWeightBold,
},
}));
If I switch over to pnpm I get the following error:
Overload 1 of 2, '(style: Styles<Theme, {}, "name">, options?: Pick<WithStylesOptions<Theme>, "link" | "index" | "media" | "name" | "meta" | "flip" | "element" | "defaultTheme" | "generateId" | "classNamePrefix">): (props?: any) => ClassNameMap<...>', gave the following error.
Argument of type '(theme: Theme) => { name: { fontWeight: FontWeight; }; }' is not assignable to parameter of type 'Styles<Theme, {}, "name">'.
Type '(theme: Theme) => { name: { fontWeight: FontWeight; }; }' is not assignable to type 'StyleRulesCallback<Theme, {}, "name">'.
Call signature return types '{ name: { fontWeight: FontWeight; }; }' and 'StyleRules<{}, "name">' are incompatible.
The types of 'name' are incompatible between these types.
Type '{ fontWeight: Property.FontWeight; }' is not assignable to type 'CSSProperties | CreateCSSProperties<{}> | PropsFunc<{}, CreateCSSProperties<{}>>'.
Type '{ fontWeight: Property.FontWeight; }' is not assignable to type 'CreateCSSProperties<{}>'.
Types of property 'fontWeight' are incompatible.
Type 'FontWeight' is not assignable to type 'FontWeightProperty | PropsFunc<{}, FontWeightProperty>'.
Type 'string & {}' is not assignable to type 'FontWeightProperty | PropsFunc<{}, FontWeightProperty>'.
Type 'string & {}' is not assignable to type '"lighter"'.
Overload 2 of 2, '(styles: Styles<Theme, {}, "name">, options?: Pick<WithStylesOptions<Theme>, "link" | "index" | "media" | "name" | "meta" | "flip" | "element" | "defaultTheme" | "generateId" | "classNamePrefix">): (props: {}) => ClassNameMap<...>', gave the following error.
Argument of type '(theme: Theme) => { name: { fontWeight: FontWeight; }; }' is not assignable to parameter of type 'Styles<Theme, {}, "name">'.
Type '(theme: Theme) => { name: { fontWeight: FontWeight; }; }' is not assignable to type 'StyleRulesCallback<Theme, {}, "name">'.
3 export const useAlertConfigurationNameStyles = makeStyles((theme) => ({
~~~~~~~~~~~~~
4 name: {
~~~~~~~~~~~
...
6 },
~~~~~~
7 }));
~~
Found 1 error.
Both are using the same version of @material-ui/core which is included in the package.json.
Does anyone know what the cause might be, or how I go about investigating more? I'm not all that familiar with TypeScript so not quite sure where to go from here.