title: Electron Typescript Material-UI withStyles error TS2694: Namespace '".../node_modules/csstype/index"' has no exported member 'FontFace'
body: <p>I'm not new to Material-UI, though I am new to Electron and using React, Typescript, Material-UI with it.</p>
  <p>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.</p>
  <p>When I try to copy and reuse it afterward, I get the error:</p>
  <pre><code>[electron] node_modules/@material-ui/styles/withStyles/withStyles.d.ts(10,24): error TS2694: Namespace '&quot;D:/Documents/Projects/Node.js/Typescript/Electron/Material-UI Sidebar Template/node_modules/csstype/index&quot;' has no exported member 'FontFace'.
  </code></pre>
  <pre><code>[electron] node_modules/@material-ui/styles/withStyles/withStyles.d.ts(10,53): error TS2694: Namespace '&quot;D:/Documents/Projects/Node.js/Typescript/Electron/Material-UI Sidebar Template/node_modules/csstype/index&quot;' has no exported member 'FontFace'.
  </code></pre>
  <p>If I just run <code>tsc</code> instead of trying to run the electron app, I still get that same error.</p>
  <p>Here are different files that may help:</p>
  <p>package.json</p>
  <pre><code>{
    &quot;name&quot;: &quot;electron-react-typescript-template&quot;,
    &quot;version&quot;: &quot;1.0.0&quot;,
    &quot;description&quot;: &quot;Electron React boilerplate&quot;,
    &quot;main&quot;: &quot;dist/index.js&quot;,
    &quot;scripts&quot;: {
      &quot;start&quot;: &quot;parcel src/index.html --out-dir parcel-dist&quot;,
      &quot;build&quot;: &quot;parcel build src/index.html --out-dir dist/parcel-build --public-url ./&quot;,
      &quot;dev&quot;: &quot;concurrently -k \&quot;npm start\&quot; \&quot;npm:electron\&quot;&quot;,
      &quot;electron&quot;: &quot;wait-on tcp:1234 &amp;&amp; tsc &amp;&amp; electron .&quot;,
      &quot;make&quot;: &quot;npm build &amp;&amp; tsc &amp;&amp; electron-builder&quot;,
      &quot;release&quot;: &quot;npm build &amp;&amp; tsc &amp;&amp; electron-builder --publish=always&quot;,
      &quot;publish&quot;: &quot;npm build &amp;&amp; electron-forge publish&quot;,
      &quot;lint&quot;: &quot;eslint --ext .ts .&quot;,
      &quot;stop&quot;: &quot;taskkill -F -IM node.exe&quot;
    },
    &quot;keywords&quot;: [],
    &quot;author&quot;: &quot;&quot;,
    &quot;license&quot;: &quot;ISC&quot;,
    &quot;build&quot;: {
      &quot;files&quot;: [
        &quot;dist/**/*&quot;,
        &quot;package.json&quot;
      ],
      &quot;directories&quot;: {
        &quot;output&quot;: &quot;./out&quot;
      },
      &quot;win&quot;: {
        &quot;target&quot;: [
          {
            &quot;target&quot;: &quot;nsis&quot;,
            &quot;arch&quot;: [
              &quot;x64&quot;,
              &quot;ia32&quot;
            ]
          }
        ]
      },
      &quot;linux&quot;: {
        &quot;category&quot;: &quot;Utility&quot;,
        &quot;target&quot;: &quot;deb&quot;
      }
    },
    &quot;dependencies&quot;: {
      &quot;@material-ui/core&quot;: &quot;^4.12.3&quot;,
      &quot;@material-ui/icons&quot;: &quot;^4.11.2&quot;,
      &quot;electron-is-dev&quot;: &quot;^2.0.0&quot;,
      &quot;electron-serve&quot;: &quot;^1.1.0&quot;,
      &quot;react&quot;: &quot;^17.0.2&quot;,
      &quot;react-dom&quot;: &quot;^17.0.2&quot;,
      &quot;react-router-dom&quot;: &quot;^5.3.0&quot;
    },
    &quot;devDependencies&quot;: {
      &quot;@babel/core&quot;: &quot;^7.14.8&quot;,
      &quot;@babel/preset-env&quot;: &quot;^7.14.8&quot;,
      &quot;@babel/preset-react&quot;: &quot;^7.14.5&quot;,
      &quot;@parcel/transformer-typescript-tsc&quot;: &quot;^2.0.0-alpha.3&quot;,
      &quot;@types/react&quot;: &quot;^17.0.20&quot;,
      &quot;@types/react-dom&quot;: &quot;^17.0.9&quot;,
      &quot;@types/react-router-dom&quot;: &quot;^5.1.9&quot;,
      &quot;@typescript-eslint/eslint-plugin&quot;: &quot;^2.18.0&quot;,
      &quot;@typescript-eslint/parser&quot;: &quot;^2.18.0&quot;,
      &quot;autoprefixer&quot;: &quot;9.8.6&quot;,
      &quot;concurrently&quot;: &quot;^6.2.1&quot;,
      &quot;electron&quot;: &quot;^13.1.7&quot;,
      &quot;electron-builder&quot;: &quot;^22.11.7&quot;,
      &quot;eslint&quot;: &quot;^7.32.0&quot;,
      &quot;eslint-plugin-import&quot;: &quot;^2.24.2&quot;,
      &quot;eslint-plugin-react&quot;: &quot;^7.25.1&quot;,
      &quot;parcel-bundler&quot;: &quot;1.12.5&quot;,
      &quot;postcss-modules&quot;: &quot;3.2.2&quot;,
      &quot;sass&quot;: &quot;^1.37.0&quot;,
      &quot;typescript&quot;: &quot;^4.4.2&quot;,
      &quot;wait-on&quot;: &quot;^6.0.0&quot;
    }
  }
  </code></pre>
  <p>tsconfig.json</p>
  <pre><code>{
    &quot;compilerOptions&quot;: {
      &quot;allowJs&quot;: true,
      &quot;module&quot;: &quot;commonjs&quot;,
      &quot;noImplicitReturns&quot;: true,
      &quot;noImplicitAny&quot;: true,
      &quot;sourceMap&quot;: true,
      &quot;baseUrl&quot;: &quot;.&quot;,
      &quot;outDir&quot;: &quot;dist&quot;,
      &quot;moduleResolution&quot;: &quot;node&quot;,
      &quot;resolveJsonModule&quot;: true,
      &quot;esModuleInterop&quot;: true,
      &quot;jsx&quot;: &quot;react&quot;,
      &quot;paths&quot;: {
        &quot;~/*&quot;: [&quot;./src/*&quot;],
        &quot;*&quot;: [&quot;node_modules/*&quot;],
      }
    },
    &quot;include&quot;: [
      &quot;src/**/*&quot;,
      &quot;electron/**/*&quot;
    ]
  }
  </code></pre>
  <p>Instance of what I'm using withStyles for:
  NavigationDrawer.tsx</p>
  <pre><code>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) =&gt; ({
      sidebar: {
          width: NavigationWidth.CLOSED,
          height: '100%',
          left: 0,
          top: 0,
          zIndex: 1
      },
      menuIcon: {
          flex: 1
      }
  })
  
  
  
  
  interface NavigationDrawerProps extends WithStyles&lt;typeof styles&gt; {
      isDrawerOpen: boolean;
      toggleDrawer: () =&gt; void
  }
  
  class _NavigationDrawer extends React.Component&lt;NavigationDrawerProps&gt; {
  
      toggleDrawer: ModalProps['onClose'] = (event, reason) =&gt; {
          console.log('Toggle Drawer')
          this.props.toggleDrawer();
      }
  
      render() {
          const { isDrawerOpen } = this.props;
  
          return (
              &lt;React.Fragment&gt;
                  &lt;div&gt;
                      &lt;CssBaseline /&gt;
                      &lt;AppBar className={this.props.classes.sidebar} id='sidebar'&gt;
                          &lt;Toolbar variant='dense'&gt;
                              &lt;IconButton className={this.props.classes.menuIcon} edge={isDrawerOpen ? 'start' : 'start'} onClick={this.props.toggleDrawer}&gt;
                                  { isDrawerOpen ? &lt;CloseIcon /&gt; : &lt;MenuIcon /&gt; }
                              &lt;/IconButton&gt;
                          &lt;/Toolbar&gt;
                          &lt;IconList isDrawerOpen={isDrawerOpen} /&gt;
                      &lt;/AppBar&gt;
                  &lt;/div&gt;
              &lt;/React.Fragment&gt;
          )
      }
  }
  
  export const NavigationDrawer = withStyles(styles)(_NavigationDrawer)
  </code></pre>
  <p>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:</p>
  <p>index.css</p>
  <pre><code>@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);
  }
  </code></pre>
  <p>EDIT: It seems to be mainly a problem when my <code>dev</code> script is running <code>tsc</code></p>