Why is TypeScript complaining when using pnpm?

Viewed 282

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.

1 Answers

You might experience this issue because of tsconfig.json options. Make sure you set declaration and declaratonMap to false

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

Related