Material-ui: Issue with imports in TypeScript

[semiadam]

I am following some of the demos in docs and I face issues when importing elements as described in the docs. Here's an example:

import Dialog, { DialogActions, DialogContent, DialogTitle } from 'material-ui/Dialog';
To fix, I have to turn this into individual imports, which makes the code very tedious:

import Dialog from 'material-ui/Dialog/Dialog';
import DialogContent from 'material-ui/Dialog/DialogContent';
import DialogTitle from 'material-ui/Dialog/DialogTitle';
import DialogActions from 'material-ui/Dialog/DialogActions';

It seems that TS does not correctly understand the module export format declared in Dialog/index.d.ts. This happens for other modules. Any ideas on how to get this fixed?

[pelotom]

@semiadam this works fine for me in [email protected]. What version are you using?

[semiadam]

I just upgraded from beta.20 to beta.21, but I still get the same error. I'm on TypeScript 2.6.1, under create-react-app package.

import { DialogActions }  from 'material-ui/Dialog';

 error TS2305: Module ''material-ui/Dialog'' has no exported member 'DialogActions'.

[pelotom]

@semiadam what does your tsconfig.json look like?

[pelotom]

@semiadam ah, I have a hunch... do you have @types/material-ui installed? Those typings apply to the pre-v1 version of material-ui, whereas with v1 the typings are built in. If you still have @types/material-ui installed you should remove it as it is probably interfering with the built-in types.

[semiadam]

{
  "compilerOptions": {
    "outDir": "build/dist",
    "module": "esnext",
    "target": "es5",
    "lib": [
      "es6",
      "dom"
    ],
    "sourceMap": true,
    "allowJs": true,
    "jsx": "react",
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "rootDir": "src",
    "forceConsistentCasingInFileNames": true,
    "noImplicitReturns": true,
    "noImplicitThis": false,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "suppressImplicitAnyIndexErrors": true,
    "noUnusedLocals": false
  },
  "exclude": [
    "node_modules",
    "build",
    "scripts",
    "acceptance-tests",
    "webpack",
    "jest",
    "src/setupTests.ts"
  ],
  "include": [
    "./src/**/*.ts",
    "./src/**/*.tsx"
  ]
}

[semiadam]

@pelotom very smart! Removing @type/material-ui fixed it! Man, this had given me so much headache and type weirdness all this time. Thanks a million!