Material-ui: JSX element type '{ComponentName}' does not have any construct or call signatures.

[ShawnCholeva]

All React Material-UI components I am importing are showing error that says "JSX element type 'Tooltip' does not have any construct or call signatures" when used in react's render method.

Expected Behavior

I would expect not to see the error from title for Components I am rendering in my react render method like so:

CurrentBehavior

I am seeing the above errors as well as intellisense errors like in the following gif link.

https://gyazo.com/6d8b895bae515feadf754556e1ff67d4

Steps to Reproduce (for bugs)

This was done in the following repo: https://github.com/ShawnCholeva/matierialui-import-issue

1. Follow directions from README in repository to see error in console or navigate to src/home/home.tsx to view intellisense errors.

Your Environment

The code editor used was VSCode version 1.24
Refer to yarn.lock file for specific versions used of each package

[ShawnCholeva]

This may not be the correct place for this issue, I have just noticed the following:

1. If I change the home.tsx from home.tsx -> home.jsx, the intellisense issues go away.
2. If I upgrade my typescript package to version 3.0.0-dev.20180609, the transpile errors go away and I don't see the errors in the console window when I start my application.

How should this be handled, as I am not entirely sure now?

[ShawnCholeva]

May be worth noting that I am also not seeing the intellisense error or console error when importing these react-modules from another library:

import { Row, Col } from 'react-flexbox-grid';

[Bessonov]

this is related to changes in typescript 2.9.1 and is fixed in 2.9.2 (not released yet).

[Bessonov]

see https://github.com/mui-org/material-ui/issues/11656#issuecomment-394292561

[oliviertassinari]

@Bessonov Thanks for linking the related issue! I'm closing. The fact that it's not working with react-flexbox-grid can only suggest that the issue is broader to Material-UI. Typescript regression is a good lead.

[benpolinsky]

Is it related to typescript 2.9.1? I downgraded to 2.8.3 and still have the error.

[Bessonov]

@benpolinsky clear caches or like. Had same error and downgrade to 2.8.3 helped me.

[gnapse]

I'm having the same issue, and in the typescript repo they recommend a solution that for material-ui usage would imply importing components like this:

import { Button } from '@material-ui/core';

instead of the recommended:

import Button from '@material-ui/core/Button';

I tried it and it does remove the typescript error, but I wonder if using this other import format would have implications in the bundle size, in the absence of very advanced tree-shaking a-la web pack 4 (which I'm not sure I am using, because I'm using CRA).

Update: I forgot to add the reference to where this is recommended as a solution: Microsoft/TypeScript-React-Starter#44

[pietrofxq]

I'm having the same issue with TypeScript 2.9.2

[Bessonov]

We use 2.9.2 now and doesn't have any issue.

[ShawnCholeva]

@Pietrofxq not sure you are using vscode, but I ran into an issue where I upgraded my package.json to pull in 2.9.2, but I had 2.9.1 installed globally. So at the bottom right of the vscode window I had to tell it to use the 2.9.2 version from project modules or upgrade my locally global typescript to 2.9.2 also