material ui - Hvorfor klager TypeScript når jeg bruker pnpm?


Jeg prøver å migrere fra yarn til pnpm, men jeg har støtt på et lite problem og jeg er ikke sikker på hvordan jeg skal gå videre med det. Jeg har ikke prøvd å endre innstillingene for hoisting ennå (jeg foretrekker å la være om mulig), men jeg prøver å forstå hvorfor dette forårsaker et problem for meg.

Jeg har en liten hjelpefunksjon som fungerer fint når jeg bruker yarn:

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

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

Hvis jeg bytter til pnpm får jeg følgende feil:

  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.

Begge bruker samme versjon av @material-ui/core, som er inkludert i package.json.

Er det noen som vet hva årsaken kan være, eller hvordan jeg kan gå frem for å undersøke mer? Jeg er ikke så godt kjent med TypeScript, så jeg er ikke helt sikker på hvor jeg skal gå videre herfra.

Svar #1

Du kan oppleve dette problemet på grunn av tsconfig.json-innstillinger. Sørg for at du setter declaration og declarationMap til false

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