Uncaught TypeError: type.toUpperCase is not a function in ReactDefaultInjection.js:53

[marcelpanse]

I'm trying react-mdl, but I get a error message in the console on some components like Card and Footer. For example, this is my class:

import React from 'react'
import { CardTitle, CardText, CardActions, CardMenu, Card, Icon, Button, IconButton } from 'react-mdl'

export default class Cards extends React.Component {
  render() {
    return (
          <Card shadowLevel={0} style={{width: '320px', height: '320px'}}>
            <CardTitle expand={true} style={{color: '#fff', background: 'url(http://www.getmdl.io/assets/demos/dog.png) bottom right 15% no-repeat #46B6AC'}}>Update</CardTitle>
            <CardText>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit.
              Aenan convallis.
            </CardText>
            <CardActions border={true}>
              <Button colored={true}>View Updates</Button>
            </CardActions>
          </Card>
    )
  }
}

The MDL components are working fine when using MDL directly with div classes, but not with the react-mdl components.

I don't know what I'm doing wrong, I'm using these versions:

⇒  npm list | grep react                                                                                                                      
│ ├── babel-plugin-react-constant-elements@1.0.3
│ ├── babel-plugin-react-display-name@1.0.3
├── eslint-plugin-react@2.7.1
│ └── react-draggable2@0.5.1
├─┬ react@0.13.3
├─┬ react-hot-loader@1.2.8
│ ├── react-hot-api@0.4.5
├─┬ react-mdl@0.9.0
├─┬ react-proxy-loader@0.3.4
├─┬ react-router@0.13.3
├── react-tap-event-plugin@0.1.7

UPDATE: Just found that importing the source file directly fixes the problem, but importing it from the npm lib does not work..

# works
import Card from '../../../node_modules/react-mdl/lib/card/Card'

# does not work
import Card from 'react-mdl'

# with class
export default class Cards extends React.Component {
  render() {
    return (
          <Card shadowLevel={0} style={{width: '320px', height: '320px'}}>
            test
          </Card>
    )
  }
}

[tleunen]

Sorry about that, I published 0.9.1 earlier to fix the issue.

Let me know if you still have the bug once you update

[marcelpanse]

Hi, I've upgraded to v0.9.1 but still have the same issue.

[tleunen]

Hmm ok, will take a look

[tleunen]

Just tested your example and it works fine for me with 0.9.1.
Are you sure it's the version you use?
Check the index.js file from the downloaded react-mdl and the one from the repository. They should be the same.

In 0.9.1, I changed it so it properly exports Card.

[marcelpanse]

Hmm, very strange, I have the newest files and I see the changes in index.js where you changed it to Card: Card.default, but still the same error.

I will try it on a clean project without any other packages and see if I can reproduce it and upload it to a public git repo so you can test it..

[tleunen]

Oh I see the error.
You should use this syntax:

import { Card } from 'react-mdl'

React-mdl is a set of multiple components, therefore you have to get the one you need. Otherwise you can do this:

import ReactMDL from 'react-mdl`
var Card = ReactMDL.Card;

But the first example in your initial post should work fine.

[marcelpanse]

It works!

I actually did try that as you can see in my initial question, but then it probably didn't work because of the bug you fixed in 0.9.1.

Thanks

[tleunen]

Exactly :)