Typescript: 'This expression is not callable. Type 'never' has no call signatures

Issue

Newbie here! I am working alongside the Freecodecamp tutorial on YT and have encountered a problem using the React app part that uses TS. When calling the const classes under the export Header section an error prompts: "This expression is not callable. Type ‘never’ has no call signatures". I have looked up many answers to this question however none seem to be helping me solve the issue. A few things that may be applicable here: the tutorial uses the @materials/core however that package does not seem to download properly (perhaps because it has been removed?) and instead have looked up the latest release that the materials UI offers ([email protected]/material). I do not know if this could be contributing to the problems because it seems more of a Typescript-phrasing issue. I have read that calling anything but a function is causing the issue however I do not know how this is fixable.

Can anyone help me resolve this issue? Thank you again for allowing me to post my problems here!

import { Button, makeStyles } from "@mui/material"
import { useEthers } from "@usedapp/core"

const useStyles = makeStyles((theme: any) => ({
  container: {
    padding: theme.spacing(4),
    display: "flex",
    justifyContent: "flex-end",
    gap: theme.spacing(1)
},
}))


export const Header = () => {
  const classes = useStyles() **// this useStyles() is causing the issue.**

  const { account, activateBrowserWallet, deactivate } = useEthers()

  const isConnected = account !== undefined

  return (
    <div className={classes.container}>
        {isConnected ? (
            <Button variant="contained" onClick={deactivate}>
                Disconnect
            </Button>
        ) : (
            <Button
                color="primary"
                variant="contained"
                onClick={() => activateBrowserWallet()}
            >
                Connect
            </Button>
        )}
    </div>
)
}

Solution

Looks like there are several breakings changes in @mui/material. For your purposes, it looks like the correct package to install is either @material-ui/styles or @material-ui/core, which goes up to major version 4, before the breaking change that is affecting you. Perhaps @materials was a typo? It’s not in the npm registry.

Answered By – Spenser Black

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published