TS2604: When importing 'material-ui' button from one package to another

Question

My team is implementing a new front-end for our application and has decided to switch from standard react to typescript. I am fairly new at developing and have been stuck on this issue for several days. Essentially we have two repositories, one that holds our components, and the other that ties them together for a front-end application. We connect these via lerna/yarn link.

The problem I face lies when importing our version of the material-ui button component from the other library and also applies to several other components. When doing so, it fails to compile.

The code in the component library compiles correctly. However we receive this error only when importing it to the other application.

I have tried several things to try to solve this issue, first modifying the Button.d.ts file within our dist/ folder within the component changing the type of ReactComponent exported, changing interface to class, etc. Second, modifying the tsconfig.json to include adjusting multiple options available via the documents, changing the "types" path, etc.

Here are what I believe to be the relevant files within the component library:

Button.d.ts:

import React from 'react';
import { ButtonProps as MuiButtonProps } from '@material-ui/core/Button';
export interface ButtonProps extends MuiButtonProps {
    defaultMargin?: boolean;
    classes: {
        root: string;
    };
}
declare const _default: React.ComponentType<Pick<React.PropsWithChildren<ButtonProps>, "disabled" || "mini" & import("@material-ui/core/styles").StyledComponentProps<"root">>;
export default _default;

Button.tsx:

import React, { Fragment } from 'react';
import clsx from 'clsx';
import { withStyles, createStyles } from '@material-ui/core/styles';
import { default as MuiButton, ButtonProps as MuiButtonProps } from '@material-ui/core/Button';

export interface ButtonProps extends MuiButtonProps {
  defaultMargin?: boolean,
  classes: {
    root: string
  }
};

const styles = () => createStyles({
  root: {
    margin: '1.5em'
  }
});

const Button: React.SFC<ButtonProps> = (props: ButtonProps) => {
  return (
    <Fragment>
      <MuiButton
        className={clsx({
          [props.classes!.root]: props.classes!.root
        })} {...props}>
      </MuiButton>
    </Fragment>
  )
};

Button.defaultProps = {
  variant: 'contained',
  color: 'primary',
  size: 'medium',
  disabled: false
};

export default withStyles(styles)(Button);

tsconfig.json:

{
  "extends": "../../tsconfig.json",
  "compilerOptions": {
    "baseUrl": ".",
    "paths": { "*": ["types/*"] },
    "outDir": "types"
  },
  "declaration": true,
  "include": ["src", "types"],
  "types": "dist/core/src/index.d.ts",
  "main": "dist/index.js",
  "files": [
    "dist/core/src/index.d.ts"
  ]
}

And here within the main application library

App.tsx:

import React, { Component } from 'react';
import { bindActionCreators } from 'redux'
import { connect } from 'react-redux'
import { Button } from '@our-company/our-component-library-core'
import { Grid } from '@our-company/our-component-library-layout'
import { get } from 'lodash'
import './App.css';
import authenticationActions from '../reducers/authentication/actions'
import userActions from '../reducers/user/actions'
type Props = {
  authDispatch: {
    login: (args: any) => any,
    logout: () => any
  },
  userDispatch: {
    fetchUser: () => any
  },
  user: object
}

type State = {
  count: number;
}
class App extends Component<Props, State> {
  componentDidMount () {
    this.props.authDispatch.login({email: 'email@email.com', password: '123456789'})
    this.props.userDispatch.fetchUser()
    this.props.authDispatch.logout()
  }
  render() {
    const { user } = this.props

    return (
      <div className="App">
        <header className="App-header">
        <Grid container>
          <Button variant="contained" color="primary">HELLO </Button>
          <h1>{ get(user, ['user', 'attributes', 'email']) }</h1>
        </Grid>

        </header>

      </div>
    );
  }
}

function mapStateToProps (state: any) {
  const {
    user
  } = state

  return {
    user
  }
}
function mapDispatchToProps (dispatch: any) {
  return {
    userDispatch: bindActionCreators(userActions, dispatch),
    authDispatch: bindActionCreators(authenticationActions, dispatch)
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(App)

I expect the code to compile, however it fails with a

ERROR in [at-loader] ./src/app/App.tsx:37:12 
    TS2604: JSX element type 'Button' does not have any construct or call signatures.

Answer 1

You are exporting a button component you have created:

const Button

The export is a default export:

export default withStyles(styles)(Button);

Whatever is the result of withStyles call, is not something that can be used as a JSX element.