"TS2554: Expected 1 arguments, but got 0." on hook returned by makeStyles

[dandrei]

• [x] This is not a v0.x issue.
• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior 🤔

TypeScript shouldn't show an error when doing:

Outside the component: const useStyles = makeStyles(styles);

Inside the component: const {/* stuff */} = useStyles();

Current Behavior 😯

The useStyles(); function call is underlined, and WebStorm says "TS2554: Expected 1 arguments, but got 0." on it.

Tech	Version
@material-ui/styles	3.0.0-alpha.4
React	16.7.0-alpha.2
TypeScript	3.1.1

[eps1lon]

Please include your styles declaration and tsconfig.json. Does the error appear when running tsc? Asking this because IDE integrations tend to use a different typescript version.

Unrelated nitpick: Prefer resolved version strings react@next changes over time. You probably meant react@16.7.0-alpha.2?

[dandrei]

I'm not running tsc myself, I'm using the IDE to transpile .ts/x to .js/x directly (in place) whenever I change a TypeScript file.

The version bundled with the WebStorm I'm using is 3.1.1.

Updated the OP to reflect the React version I use: 16.7.0-alpha.2

styles variable is:

const styles = {
    chart: {
        width: '100%',
        height: 70,
        backgroundColor: '#f9f9f9'
    },
}

(I get the same message when styles is defined as a function (theme => { /* definitions */ }).

tsconfig.json:

{
  "compilerOptions": {
    "sourceMap": false,
    "target": "ES2017",
    "module": "ES6",
    "jsx": "react",
    "moduleResolution": "Node",
    "strictPropertyInitialization": true,
    "strictNullChecks": true,
    "noImplicitAny": true
  }
}

[eps1lon]

(I get the same message when styles is defined as a function (theme => { /* definitions */ }).

Then your setup has an issue too. We test for callback usage and that is working fine. It does however has a reproducible bug when using a static styles object.

[TeoTN]

The issue is back with combination of typescript@3.5.0-rc (complier config incremental: true) and @material-ui/core@4.0.0-rc.0. It does work however with typescript@3.3.4000

[eps1lon]

@TeoTN Thanks for the report. I think I know why this happens.

[eps1lon]

@TeoTN Could you include the code that is causing trouble. I can't reproduce it.

[TeoTN]

@eps1lon here's a repo that reproduces the bug: TeoTN/mui-ts-bug

[denyo]

I also came across the error of this ticket with typescript@3.5.0-rc and @material-ui/core@4.0.0-rc.0. My reason for upgrading from typescript@3.4.3 was that VS Code was incredible slow with auto completion and tooltips.

When downgrading to typescript@3.3.4000 there were new errors around makeStyles like

      Types of property 'main' are incompatible.
        Type '{ position: string; top: number; left: number; bottom: number; right: number; }' is not assignable to type 'CSSProperties | ((props: {}) => CSSProperties)'.
          Type '{ position: string; top: number; left: number; bottom: number; right: number; }' is not assignable to type 'CSSProperties'.
            Types of property 'position' are incompatible.
              Type 'string' is not assignable to type 'PositionProperty'.  TS2345

     9 | }));
    10 | 
  > 11 | const useStyles = makeStyles((theme: Theme) => ({
       |                              ^
    12 |   main: {
    13 |     position: 'absolute',
    14 |     top: 0,

I was able to fix this in combination with createStyles like:

const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    main: {
      position: 'absolute',
      top: 0,

Perhaps worth mentioning is that only the import { createStyles } from '@material-ui/styles'; works while createStyles from @material-ui/core does not since the typings are different.

Using createStyles wasn't necessary with both typescript@3.4.3 and typescript@3.5.0-rc.

[eps1lon]

Since this issues only occurs in a release candidate of typescript I'll close this. We can't support unstable versions of our dependencies. Please file a new issue if this error re-appears in a stable version of Typescript.

[nettiopsu]

It seems to be actual for typescript 3.5.1, which is the latest stable version for now (together with material-ui 4)

[ggascoigne]

With the 4.0.2 version and ts 3.5.1 I can trigger this error by adding "strictNullChecks": false to my tsconfig.json.

[eps1lon]

With the 4.0.2 version and ts 3.5.1 I can trigger this error by adding "strictNullChecks": false to my tsconfig.json.

This is not supported by our typings:

Our definitions are tested with the following tsconfig.json. Using a less strict tsconfig.json or omitting some of the libraries might cause errors.

-- https://material-ui.com/guides/typescript/

Every package published under types/ isn't tested with "strictNullChecks": false as well meaning virtually no package supports this configuration.

[ggascoigne]

I’m surprised. I’ve inherited projects with strict:false and never had it generate more errors before.

Since v3.x worked, I assumed that 4.x would too.

Anyway, that note might help others who are reporting this problem, it’s certainly an unexpected cost to upgrading.

[eps1lon]

There were other issues in 3.x as far as I remember. You either didn't encounter them or already had unsound types. This requirement wasn't introduced with 4.x.

[ggascoigne]

I'm sure that there were and I lucked out.

But, if I take a sample project that compiles fine with strict: true, I don't expect to hit this issue simply by flipping it to strict: false. I don't see how unsound types would have anything to do with that situation.

[eps1lon]

I don't see how unsound types would have anything to do with that situation.

Has to do with utility types that break with strictNullChecks: false. Without that flag undefined | null can be assigned to any. Those are implementation details though.

• https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-0.html
• https://basarat.gitbooks.io/typescript/docs/options/strictNullChecks.html

[devhyunjae]

This issue needs re-open!

[krazyjakee]

How do I get around this issue for now? If I pass in null, makeStyles throws 'cannot find classes of undefined' error. Sometimes I don't have props to pass, so what do I pass?

[denyo]

@krazyjakee try const c = useStyles({});

[wujasmine]

@krazyjakee try const c = useStyles({});

Thanks this worked!

[LittleTheFu]

I come across this error with typescript 3.7.5. This const c = useStyles({}); works, but it inconsistent with the doc: https://material-ui.com/zh/styles/basics/

[ynotdraw]

FWIW, seeing the same thing. I've tried the suggestions posted here (https://github.com/mui-org/material-ui/issues/16867) with strict and strictNullChecks, but still no dice. Is const c = useStyles({}); "the way" now?