Can't use <Avatar /> component

[hackingbeauty]

Hello!

Am I using the Avatar component correctly? I'm trying to display the file folder icon and it's not working.

import React from 'react';
import { LeftNav, RaisedButton, Avatar, FileFolder } from 'material-ui';

export default React.createClass({

  getDefaultProps() {
    return {};
  },

  handleTouchTap(task) {
    ActionCreator.openNav('whatever');
  },

  render() {
    return (
      <div>
        <Avatar icon={<FileFolder />} />
      </div>
    );
  }
});

[jkruder]

@hackingbeauty FileFolder is not exported https://github.com/callemall/material-ui/blob/master/src/index.js. Currently, if you want to get at any of the svg-icons you'll need to get at them from node_modules/material-ui/lib/svg-icons.

@hai-cea Any thoughts on exporting the svg-icons (as part of src/index.js or src/svg-icons/index.js)? Or is the icon-builder what @hackingbeauty should be using?

[oliviertassinari]

I would suggest you not to use the index. With this library, it's simpler, but you end up loading a lot of components that you don't use.

[jkruder]

@oliviertassinari The index would be at src/svg-icons/index.js and not src/index.js. This way we do not bloat the index at src/index.js.

[hai-cea]

Yeh, I agree that we shouldn't add it to index.js. I don't see any harm in adding index.js to the icon folder and subfolders though. It's best to modify the build script to do this.

[hackingbeauty]

I still can't get the Avatar component to work. Whenever I try to render it, I get the following error:

"Cannot read property 'toUpperCase' of undefined".

Here is my code:

import { Avatar } from 'material-ui';

export default React.createClass({

  getDefaultProps() {
    return {
    };
  },

  render() {
    return (
      <div>
        <Avatar />
      </div>
    );
  }
});

feeling frustrated

Why isn't this working?

[oliviertassinari]

@jkruder Yes, that's fine. What I was saying is not directly linked to this issue.
In many cases, you don't use every comportents of material-ui. This is espacially true for svg icons. Using the index rather than node_modules/material-ui/lib/svg-icons will make you build, in your output script a lot of unused components. This is bad for performances. This is why I recommand to always require the specific composent you need.

[hai-cea]

@hackingbeauty Doesn't look like you've specified a src attribute or any children?

[hackingbeauty]

Even when specifying an src attribute, the component does not work. Not sure what you're referring to by "children".

I'm disappointed I can't use this component.

[hai-cea]

I'm not sure what difference there is between your code base and the docs site. Here are the different variations of the Avatar component:
https://github.com/callemall/material-ui/blob/master/docs/src/app/components/pages/components/avatars.jsx#L93

[hackingbeauty]

Thanks for the reference @hai-cea. Still doesn't work.

The error originates on line 36761 of index.js (autoGenerateWrapperClass function).

For some reason, when I try to use the Avatar component, the type argument sent to autoGenerateWrapperClass is undefined.

[jkruder]

@hackingbeauty I've seen this error when the thing being rendered is undefined. I was working with someone on the table components a few days ago and the table-row had not been exported but they had put

import { TableRow } from 'material-ui'
...
  render() {
   return <TableRow .../>
  }
...

So, I'm thinking Avatar is not available for you to render. It's currently exported in the index and you're not seeing any errors about not finding material-ui. So, I think you're using a version that does not have the Avatar component. Can you check node_modules/material-ui/lib/ for avatar.js?

[hackingbeauty]

Hey @jkruder,

I checked inside of node_modules/material-ui/lib and avatar.js is NOT there. All the other components are there.

The version of material-ui I have installed is 0.8.0. I tried to uninstall and reinstall, but I still get v0.8.0.

Am I using an incorrect version?

[jkruder]

I would try 'npm cache clear' to clear your local cache and then try installing. If that doesn't work I would try 'npm install material-ui@0.9.2' to grab the latest.

[hackingbeauty]

@jkruder, that was it!

Why isn't 0.9.2 automatically installed when someone runs "npm install material-ui"?

[jkruder]

@hackingbeauty It could be a couple things. The most likely reason is you have a cached version of MUI that meets the version requirements in your package.json or you're not using the public NPM registry. I would check your version requirement in your package.json first.

[jkruder]

@hackingbeauty Is there anything else that we can help you with in regards to this issue?

[hackingbeauty]

@jkruder, I'm ok for now, thanks!

[shaurya947]

Today, we also have an index.js file for the SVG icons folder, and a script the generates it. See #1959