Material UI Theme Provider not being included properly in react/blaze app

help
1

Greetings fellow meteorites!

I am in the process of including material ui (react based) into an existing blaze app. I’m using the meteor guide and the material-ui docs as my instructions to do this properly but unfortunately to no avail. Has anyone successfully done this before? According to the material-ui docs you are supposed to inject an MuiThemeProvider into your main App Component but I keep getting the following error:

MuiThemeProvider.render(): A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object.

Here is my root blaze html template:

<template name="main">
  <head>...</head>
  <body>
    <div id="wrap">
      <div id="react-app-wrapper">
        {{> React component=App}}
      </div>
    </div>
 </body>
</template>

Notice I am using https://guide.meteor.com/react.html#react-in-blaze as my guidelines and am using the meteor package react-template-helper.

Here is my main.js file:

if(Meteor.isClient){
  import App from './users/client/ui/components/App.js';
  Template.main.onCreated(function(){
  });
  Template.main.helpers({
    'App' : function(){
      return App;
    }
}

And my App.js Component File:

import React, { Component, PropTypes } from 'react';
import lightBaseTheme from 'material-ui/styles/baseThemes/lightBaseTheme';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
const lightMuiTheme = getMuiTheme(lightBaseTheme);

export default class App extends Component{
  constructor(props){
    super(props);
  }
  render() {
    return (
      <div>
        <MuiThemeProvider muiTheme={lightMuiTheme} >
        </MuiThemeProvider >
      </div>
    );
  }
}

Appreciate your help big time! I have tried everything and feeling pretty stumped right now… :frowning:
Alex