Definitelytyped: typescript import material-ui works but import components doesn't

[apoberez]

why this works

import * as Material from 'material-ui';
...

<Material.Table></Material.Table>

but this doesn't:

import * as Table from 'material-ui/lib/table/table'

i get error: error TS1192: Module ''material-ui/lib/table/table'' has no default export.
as well as this:

import Table from 'material-ui/lib/table/table'

tsconfig:

{
  "compilerOptions": {
    "target": "es6",
    "sourceMap": true,
    "jsx": "preserve"
  },
  "files": [
    "../typings/tsd.d.ts"
  ]
}

webpack:

...
            {
                loader: 'babel-loader?presets[]=es2015&presets[]=react!ts-loader',
                test: /\.tsx?$/,
                exclude: /node_modules/
            }
...

works only:

import Table = require('material-ui/lib/table/table');

...
{
  "compilerOptions": {
    "target": "es5",
    "sourceMap": true,
    "jsx": "React"
  },
  "files": [
    "../typings/tsd.d.ts"
  ]
}
...

...
{
        loader: 'ts-loader',
        test: /\.tsx?$/,
        exclude: /node_modules/
},
...

[use-strict]

It looks like some time in December material-ui switched from CommonJS to ES6 format. This is a breaking change in material-ui v0.15. The TypeScript definitions were written for v0.13 and haven't been updated yet.

[ngbrown]

The definitions were updated to export ES6 default for material-ui v0.14 in pull-request #7354. However, I'm not 100% clear on what the most compatible way is for TypeScript definition files going forward.

Personally I use TypeScript in ES6 mode then Babel and then Webpack. But I can't assume everyone uses that?

[dupski]

I've been trying to use just awesome-typescript-loader with webpack and these definitions (I prefer just using a single transpiler + packager), but keep running into

JSX element type '...' does not have any construct or call signatures

But the funny thing is it still compiles and runs. Most annoying.

[CreepGin]

Solution:

import { Table } from 'material-ui'

[use-strict]

@CreepGin , that results in the entire library being included in the bundle, that is assuming you are using webpack.

[dalexander01]

Anyone get this working? I'm having trouble importing material ui components as well.

[dalexander01]

@ngbrown how are you importing material-ui components? Is something like

import {Table} from 'material-ui' the only way?

[ngbrown]

@dalexander01 I think only the ES6 way works. The way specified in their documentation works:

import {Table, TableBody, TableHeader, TableHeaderColumn, TableRow, TableRowColumn} from 'material-ui/Table';

or

import Subheader from 'material-ui/Subheader';

If you are using ES6 and it's not working, what is the error message you are encountering?

Hope that helps.

[kellenp]

Is this issue resolved? It looks like MUI has been updated to 1.16 in the latest DT package.

[dupski]

Hey @kellenp, I'm using MUI with TypeScript without any issues now so this can be closed from my side

[olee]

I am still getting errors like Cannot find module 'material-ui/RaisedButton', however it still runs.
I guess the typings need to be updated?

[ncknuna]

I'm getting these errors too (e.g. Could not find a declaration file for module 'material-ui/styles/MuiThemeProvider'), even though I can find the module declarations inside the @types/material-ui. Is there just something misconfigured about my tsconfig?

[jef-sure]

I have the same question. I tried to use mobx+react+typescript+material-ui, but I cant make material-ui to work with typescript.

[a1astair]

Any update on this? I am still getting the does not have any construct... error

[Aristona]

I'm also having the same issue.

[nickpisacane]

For anyone having the "Cannot Find Module" error with sub-directory imports (e.g import RaisedButton from 'material-ui/RaisedButton'), it seems adding "material-ui" to "types" in .tsconfig fixes the issue, thereby including the declaration file without importing the whole material-ui lib. Probably a noob thing to point out (i'm pretty new to typescript), but hope it helps!

[ncknuna]

Oh, thanks @nickpisacane! When I first read your comment and then read the docs here (https://www.typescriptlang.org/docs/handbook/tsconfig-json.html) I thought I would have to specify types for all of my installed packages, because of this: "If types is specified, only packages listed will be included." Turns out it seems to work fine though, so I don't know what that documentation actually means, so this is resolved for me at least :)

[gitsupersmecher]

Could someone post a complete solution? I just looked into Material-UI, and using it with typescript.

The set-up is tsc -> es6 and webpack -> index.js.

"compilerOptions": {
"module": "es6",
"target": "es6",
"moduleResolution": "node",
"baseUrl": ".",
"types" : ["material-ui"],

The code is simple:

`
import * as React from "react";
import * as ReactDOM from "react-dom";
import {AppBar} from 'material-ui';

export class AppLoader extends React.Component < any, any > {

public constructor(props) {
    super(props);
}

public render(): JSX.Element {
    return ( <div> <AppBar  title="Title"    />   </div>);
}

}

ReactDOM.render(, document.getElementById("root"));
`

Error:

AppBar.js:186 Uncaught TypeError: Cannot read property 'prepareStyles' of undefined

[wskidmore]

@gitsupersmecher if you are using the latest mui, mui components are required to be children (at any level) of a theme provider component as the theme provider sets up context, which is the root cause of your error message.

http://www.material-ui.com/#/get-started/usage

[corlaez]

JSX element type 'Tabs' does not have any construct or call signatures. This is the error I get. I used all combiations i could think of i.e.
import { Tabs, Tab } from 'material-ui/Tabs';

I solved my issue like this:

1. Make sure you are using material next yarn add material-ui@next
2. import Tabs, { Tab } from 'material-ui/Tabs';

[mankityau]

Is there any update on the situation?

I am having a similar situation.
I am trying to use import { ExpandMore, ExpandLess } from "@material-ui/icons"; for the icons.
My IDE (IntelliJ) is warning with a message TS2307: Cannot find module '@material-ui/icons' or its corresponding type declarations.
(Even though, it compiles and work)

However, when I modify my tsconfig.json from using compilerOptions > module: es6 to compilerOptions > module: es5 solves the issue.