Electron Typescript Material-UI withStyles 错误 TS2694：命名空间 '".../node_modules/csstype/index"' 没有导出的成员 'FontFace'

Question

我对 Material-UI 并不陌生，虽然我是 Electron 的新手并使用 React、Typescript、Material-UI。

当我尝试为自己制作电子样板代码以便以后轻松启动项目时，我遇到了这个错误。当我一个接一个地安装一个依赖项并使用它们时，我没有遇到任何问题——当我第一次将 Material-UI 安装到项目中并创建样板代码时，它没有任何问题。当我以我想要的方式为基础获得所有内容时，我删除了 .cache、dist、parcel-dist 和 node_modules 文件夹，以减小样板文件的大小以供以后使用。

当我之后尝试复制和重用它时，我收到错误：

[electron] node_modules/@material-ui/styles/withStyles/withStyles.d.ts(10,24): error TS2694: Namespace '"D:/Documents/Projects/Node.js/Typescript/Electron/Material-UI Sidebar Template/node_modules/csstype/index"' has no exported member 'FontFace'.

[electron] node_modules/@material-ui/styles/withStyles/withStyles.d.ts(10,53): error TS2694: Namespace '"D:/Documents/Projects/Node.js/Typescript/Electron/Material-UI Sidebar Template/node_modules/csstype/index"' has no exported member 'FontFace'.

如果我只是运行 tsc 而不是尝试运行电子应用程序，我仍然会遇到同样的错误。

以下是可能有帮助的不同文件：

package.json

{
  "name": "electron-react-typescript-template",
  "version": "1.0.0",
  "description": "Electron React boilerplate",
  "main": "dist/index.js",
  "scripts": {
    "start": "parcel src/index.html --out-dir parcel-dist",
    "build": "parcel build src/index.html --out-dir dist/parcel-build --public-url ./",
    "dev": "concurrently -k \"npm start\" \"npm:electron\"",
    "electron": "wait-on tcp:1234 && tsc && electron .",
    "make": "npm build && tsc && electron-builder",
    "release": "npm build && tsc && electron-builder --publish=always",
    "publish": "npm build && electron-forge publish",
    "lint": "eslint --ext .ts .",
    "stop": "taskkill -F -IM node.exe"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "build": {
    "files": [
      "dist/**/*",
      "package.json"
    ],
    "directories": {
      "output": "./out"
    },
    "win": {
      "target": [
        {
          "target": "nsis",
          "arch": [
            "x64",
            "ia32"
          ]
        }
      ]
    },
    "linux": {
      "category": "Utility",
      "target": "deb"
    }
  },
  "dependencies": {
    "@material-ui/core": "^4.12.3",
    "@material-ui/icons": "^4.11.2",
    "electron-is-dev": "^2.0.0",
    "electron-serve": "^1.1.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-router-dom": "^5.3.0"
  },
  "devDependencies": {
    "@babel/core": "^7.14.8",
    "@babel/preset-env": "^7.14.8",
    "@babel/preset-react": "^7.14.5",
    "@parcel/transformer-typescript-tsc": "^2.0.0-alpha.3",
    "@types/react": "^17.0.20",
    "@types/react-dom": "^17.0.9",
    "@types/react-router-dom": "^5.1.9",
    "@typescript-eslint/eslint-plugin": "^2.18.0",
    "@typescript-eslint/parser": "^2.18.0",
    "autoprefixer": "9.8.6",
    "concurrently": "^6.2.1",
    "electron": "^13.1.7",
    "electron-builder": "^22.11.7",
    "eslint": "^7.32.0",
    "eslint-plugin-import": "^2.24.2",
    "eslint-plugin-react": "^7.25.1",
    "parcel-bundler": "1.12.5",
    "postcss-modules": "3.2.2",
    "sass": "^1.37.0",
    "typescript": "^4.4.2",
    "wait-on": "^6.0.0"
  }
}

tsconfig.json

{
  "compilerOptions": {
    "allowJs": true,
    "module": "commonjs",
    "noImplicitReturns": true,
    "noImplicitAny": true,
    "sourceMap": true,
    "baseUrl": ".",
    "outDir": "dist",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "jsx": "react",
    "paths": {
      "~/*": ["./src/*"],
      "*": ["node_modules/*"],
    }
  },
  "include": [
    "src/**/*",
    "electron/**/*"
  ]
}

我使用 withStyles 的实例： NavigationDrawer.tsx

import React from 'react';

import { AppBar, createStyles, CssBaseline, Drawer, IconButton, Theme, Toolbar, WithStyles } from '@material-ui/core';
import MenuIcon from '@material-ui/icons/Menu';
import CloseIcon from '@material-ui/icons/Close';

import { ModalProps } from '@material-ui/core';
import { withStyles } from '@material-ui/styles/index';

import { NavigationWidth } from '~/constants/ContentConstants';
import { IconList } from './IconList';




const styles = (theme: Theme) => ({
    sidebar: {
        width: NavigationWidth.CLOSED,
        height: '100%',
        left: 0,
        top: 0,
        zIndex: 1
    },
    menuIcon: {
        flex: 1
    }
})




interface NavigationDrawerProps extends WithStyles<typeof styles> {
    isDrawerOpen: boolean;
    toggleDrawer: () => void
}

class _NavigationDrawer extends React.Component<NavigationDrawerProps> {

    toggleDrawer: ModalProps['onClose'] = (event, reason) => {
        console.log('Toggle Drawer')
        this.props.toggleDrawer();
    }

    render() {
        const { isDrawerOpen } = this.props;

        return (
            <React.Fragment>
                <div>
                    <CssBaseline />
                    <AppBar className={this.props.classes.sidebar} id='sidebar'>
                        <Toolbar variant='dense'>
                            <IconButton className={this.props.classes.menuIcon} edge={isDrawerOpen ? 'start' : 'start'} onClick={this.props.toggleDrawer}>
                                { isDrawerOpen ? <CloseIcon /> : <MenuIcon /> }
                            </IconButton>
                        </Toolbar>
                        <IconList isDrawerOpen={isDrawerOpen} />
                    </AppBar>
                </div>
            </React.Fragment>
        )
    }
}

export const NavigationDrawer = withStyles(styles)(_NavigationDrawer)

我不确定它是否相关的一件事是，我确实在本地导入了一些自定义字体，我不确定这是否是触发此问题的原因 - 或者它是否与 Material-UI 冲突；不过，在我删除我提到的文件夹之前它工作正常。我在 CSS 中导入它们，并将它们链接到 index.html 中，如下所示：

index.css

@font-face {
  font-family: RobotoCondensed;
  src: url(assets/roboto-condensed.light.ttf);
  font-weight: 800;
}

@font-face {
  font-family: EconomicaBold;
  src: url(assets/economica-bold.ttf);
}

编辑：当我的 dev 脚本正在运行 tsc 时，这似乎主要是一个问题

Answer 1

您以某种方式在 node_modules 中获得了旧版本的 csstype。使用npm ls csstype 并找出原因。它应该安装了 v3。

如果您手动安装它应该可以解决npm install csstype --save-dev，但最好找到真正的依赖问题的解决方案。