网站搜索

material ui - 使用 pnpm 时为什么 TypeScript 会报错?


我正在尝试从 yarn 迁移到 pnpm,但遇到了一些问题,我不确定该如何处理。我还没有尝试调整提升(hoisting)相关的设置(如果可能的话,我更愿意不调整),但我正在努力理解为什么这会给我带来问题。

我有一个小型实用函数,在使用 yarn 时运行良好:

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

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

如果我切换到 pnpm,我会收到以下错误:

  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.

两者都使用 @material-ui/core 的相同版本,该版本已包含在 package.json 中。

有人知道可能的原因是什么,或者我该如何进一步调查吗?我对 TypeScript 不太熟悉,所以不太确定接下来该怎么办。

答案#1

您可能会遇到这个问题是因为 tsconfig.json 的选项。确保将 declaration 和 declarationMap 设置为 false

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