material ui - Perché TypeScript dà errori quando si usa pnpm?

Sto cercando di migrare da yarn a pnpm, ma ho incontrato un piccolo problema e non sono sicuro su come procedere. Non ho ancora provato a modificare le impostazioni relative all'hoisting (preferirei non farlo se possibile), ma sto cercando di capire perché questo mi sta causando un problema.

Ho una piccola funzione di utilità che funziona bene quando uso yarn:

import { makeStyles } from '@material-ui/core';

export const useAlertConfigurationNameStyles = makeStyles((theme) => ({
    name: {
        fontWeight: theme.typography.fontWeightBold,
    },
}));

Se passo a pnpm ricevo il seguente errore:

  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.

Entrambi stanno usando la stessa versione di @material-ui/core che è inclusa nel package.json.

Qualcuno sa quale potrebbe essere la causa oppure come potrei approfondire le indagini? Non sono molto familiare con TypeScript, quindi non sono sicuro da dove partire da qui.

Risposta n. 1

Potresti riscontrare questo problema a causa delle opzioni di tsconfig.json. Assicurati di impostare declaration e declarationMap su false

 "compilerOptions": {
    "declaration": false,
    "declarationMap": false,
  (...)
 }