this.context.muiTheme is undefined with Tabs

[agereaude]

I'm trying to use Tabs and getting this error message:

"Warning: owner-based and parent-based contexts differ (values: undefined vs [object Object]) for key (muiTheme) while mounting Tab (see: http://fb.me/react-context-by-parent)"
TypeError: this.context.muiTheme is undefined

It seems as if the context wasn't being set in Tabs for its children.

This is the class that contains the Tabs component:

import MuiComponent from './MuiComponent.js';
import {Tabs, Tab} from 'material-ui';

export default class TabsEditor extends MuiComponent {

  render() {
    return (
      <Tabs>
        <Tab label="Listar"><div>Contenido</div></Tab>
        <Tab label="Detalle"><div>Contenido</div></Tab>
        <Tab label="Configuración"><div>Contenido</div></Tab>
      </Tabs>
    );
  }

}

It extends from MuiComponent, which implements the getChildContext() requirement:

import {Styles} from 'material-ui';
let ThemeManager = new Styles.ThemeManager();
ThemeManager.setTheme(ThemeManager.types.DARK);

export default class MuiComponent extends React.Component {
  getChildContext() {
    return {
      muiTheme: ThemeManager.getCurrentTheme()
    };
  }
}

MuiComponent.childContextTypes = {
  muiTheme: React.PropTypes.object.isRequired
};

[mairh]

@gerherz As far as I have understood they way you use ThemeManager is something like:

import mui from "material-ui";
let ThemeManager = new mui.Styles.ThemeManager();

In your MuiComponent.js file you are importing {Styles} directly instead of referencing it to mui. I am not sure if that is the issue because I haven't tried it on my machine yet. Are you able to use other components from Materiai-UI in the way you are defining ThemeManager

[agereaude]

Yes, it's working fine with other components. I'm using ES6 with Babel, which allows me to use that syntax. It is equal to what you've wrote, as far as I know.

[agereaude]

Same thing is happening with Lists and ListItems.
In this last case, EnhancedButton::_owner is being set to null and, thus, its context doesn't contain muiTheme. I couldn't find out why, though, as its creation happens inside ListItem::render().

In React 0.14 this won't be an issue anymore, as they will stop using owner's context and replace it with the parent's context.

[hai-cea]

@gerherz Have you seen #608 ? This could be a problem with multiple versions of react in your project.

[agereaude]

Thanks. I've finally upgraded to React 0.14 beta where this issue is solved.

[shea256]

@gerherz how did you upgrade to React 0.14 Beta and not have conflicts with material-ui and react-tab-event-plugin?

[cpttripzz]

@shea256 not to mention react-router and pretty much any module that you are using right now. does anybody have themes working at all?

[agereaude]

@shea256 react-tab-event-plugin wasn't working for me on v0.13 and isn't working on v0.14 either. Take a look at this issue: zilverline/react-tap-event-plugin#22

The only problem I had was related to child contexts, which was changed on React v0.14 to parent context.