I've been facing an issue while attempting to transition from yarn to pnpm. I haven't experimented with changing the hoisting settings yet, as I'd prefer not to do so if possible. The problem lies in my lack of understanding about why this migration is causing me trouble.
When utilizing yarn, a small utility function functions as expected:
import { makeStyles } from '@material-ui/core';
export const useAlertConfigurationNameStyles = makeStyles((theme) => ({
name: {
fontWeight: theme.typography.fontWeightBold,
},
}));
However, upon switching to pnpm, I encounter 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 installations utilize the same version of @material-ui/core as specified in the package.json.
If anyone has insight into what could be causing this issue or how I might go about investigating further, please share. My knowledge of TypeScript is limited, so guidance on next steps would be greatly appreciated.