I'm not new to Material-UI, though I am new to Electron and using React, Typescript, Material-UI with it.
I've been getting this error when I've been trying to make an electron boilerplate code for myself to easily start off a project with later. I'm not running into any issues when I've been installing one dependency after another and using them -- Material-UI had no issue when I first installed it to the project and created the boilerplate code. When I got everything the way I wanted for the base I deleted the .cache, dist, parcel-dist, and node_modules folders to reduce the size of the boilerplate for it to be used later.
When I try to copy and reuse it afterward, I get the error:
[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'.
If I just run tsc instead of trying to run the electron app, I still get that same error.
Here are different files that may help:
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/**/*"
]
}
Instance of what I'm using withStyles for: 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)
One thing I'm unsure if it's related, is I do import some custom fonts locally, which I'm unsure if that is what's triggering this issue or not -- or if it's conflicting with Material-UI; though, it works fine until I delete the folders I mentioned. I import them in CSS, and link them in the index.html like so:
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);
}
EDIT: It seems to be mainly a problem when my dev script is running tsc