13

I have a .tsx file in which I am trying to import a RaisedButton component from material-ui like so:

import * as RaisedButton from 'material-ui/lib/raised-button'

However, that gives me the error described in the title, any ideas what I might be doing wrong?

Teo.sk
  • 2,619
  • 5
  • 25
  • 30
Raul Tomescu
  • 133
  • 1
  • 1
  • 4

1 Answers1

23

This is from the material-ui.d.ts file.

export import RaisedButton = __MaterialUI.RaisedButton; // require('material-ui/lib/raised-button');

So you should import it like this.

import RaisedButton = require('material-ui/lib/raised-button');
Blake Bowen
  • 1,049
  • 1
  • 12
  • 36
  • Yep, I got it working. Could you also explain why that is? Is this a new standard of exporting/importing modules? What is the difference between import x from '...' ; import * as x from '...' and import x = require('...') ? – Raul Tomescu Feb 11 '16 at 09:34
  • 2
    It can be confusing. The new import syntax is for ES6 modules. require() is for AMD/CommonJS, which material-ui is doing using export default {}. This answer can it explain it better. http://stackoverflow.com/questions/29596714/new-es6-syntax-for-importing-commonjs-amd-modules-i-e-import-foo-require/29598404#29598404 – Blake Bowen Feb 11 '16 at 11:26