Hi I'm currently developing a new React application using Material Ui for my choice of a css library. I'm trying to get it to play nice with react-router. I'm not sure where I'm supposed to put MuiThemeProvider. The docs example wraps the main app ponent around it.

This works fine without any additional ponents from react-router. But when I want to render the rest of the child ponents from react router it throws an error.

Index.js

  import React from "react";
  import ReactDOM from "react-dom";
  import injectTapEventPlugin from "react-tap-event-plugin";
  import routes from "./routes";
  import { Router, browserHistory} from "react-router";
  import "../public/css/index.css";
  import MuiThemeProvider from "material-ui/styles/MuiThemeProvider";

  injectTapEventPlugin();

  ReactDOM.render(
       <MuiThemeProvider>
          <Router history={browserHistory} routes={routes} />
      </MuiThemeProvider>,
       document.getElementById("root")
  );

and App.js

import React, { Component } from "react";
import NavigationBar from "./NavigationBar";

class App extends Component {
  render() {
    return (
      <div>
        <NavigationBar />
        {this.props.children}
      </div>
     );
  }
}   

export default App;

The error being thrown is this

warning.js:36Warning: React.createElement: type is invalid -- expected a string (for built-in ponents) or a class/function (for posite ponents) but got: undefined. You likely forgot to export your ponent from the file it's defined in. Check the render method of WelePage.

and

Uncaught Error: Element type is invalid: expected a string (for built-in ponents) or a class/function (for posite ponents) but got: undefined. You likely forgot to export your ponent from the file it's defined in. Check the render method of WelePage. at invariant (invariant.js:44) at instantiateReactComponent (instantiateReactComponent.js:77) at instantiateChild (ReactChildReconciler.js:44) at ReactChildReconciler.js:71 at traverseAllChildrenImpl (traverseAllChildren.js:77) at traverseAllChildren (traverseAllChildren.js:172) at Object.instantiateChildren (ReactChildReconciler.js:70) at ReactDOMComponent._reconcilerInstantiateChildren (ReactMultiChild.js:187) at ReactDOMComponent.mountChildren (ReactMultiChild.js:226) at ReactDOMComponent._createInitialChildren (ReactDOMComponent.js:697)

Hi I'm currently developing a new React application using Material Ui for my choice of a css library. I'm trying to get it to play nice with react-router. I'm not sure where I'm supposed to put MuiThemeProvider. The docs example wraps the main app ponent around it.

This works fine without any additional ponents from react-router. But when I want to render the rest of the child ponents from react router it throws an error.

Index.js

  import React from "react";
  import ReactDOM from "react-dom";
  import injectTapEventPlugin from "react-tap-event-plugin";
  import routes from "./routes";
  import { Router, browserHistory} from "react-router";
  import "../public/css/index.css";
  import MuiThemeProvider from "material-ui/styles/MuiThemeProvider";

  injectTapEventPlugin();

  ReactDOM.render(
       <MuiThemeProvider>
          <Router history={browserHistory} routes={routes} />
      </MuiThemeProvider>,
       document.getElementById("root")
  );

and App.js

import React, { Component } from "react";
import NavigationBar from "./NavigationBar";

class App extends Component {
  render() {
    return (
      <div>
        <NavigationBar />
        {this.props.children}
      </div>
     );
  }
}   

export default App;

The error being thrown is this

warning.js:36Warning: React.createElement: type is invalid -- expected a string (for built-in ponents) or a class/function (for posite ponents) but got: undefined. You likely forgot to export your ponent from the file it's defined in. Check the render method of WelePage.

and

Uncaught Error: Element type is invalid: expected a string (for built-in ponents) or a class/function (for posite ponents) but got: undefined. You likely forgot to export your ponent from the file it's defined in. Check the render method of WelePage. at invariant (invariant.js:44) at instantiateReactComponent (instantiateReactComponent.js:77) at instantiateChild (ReactChildReconciler.js:44) at ReactChildReconciler.js:71 at traverseAllChildrenImpl (traverseAllChildren.js:77) at traverseAllChildren (traverseAllChildren.js:172) at Object.instantiateChildren (ReactChildReconciler.js:70) at ReactDOMComponent._reconcilerInstantiateChildren (ReactMultiChild.js:187) at ReactDOMComponent.mountChildren (ReactMultiChild.js:226) at ReactDOMComponent._createInitialChildren (ReactDOMComponent.js:697)

• javascript
• reactjs
• material-ui

Share Improve this question Follow edited Aug 10, 2020 at 20:42 HoldOffHunger 21k1111 gold badges120120 silver badges146146 bronze badges asked Feb 26, 2017 at 12:34 user6127082user6127082

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

I usually wrap my main container's content with the MuiThemeProvider ponent.

For example in my router I have (notice AppContainer as base ponent):

<Router history={browserHistory}>
    <Route path="/" ponent={AppContainer}>
        <IndexRoute
            getComponent={(nextState, cb) => {
                System.import('./containers/home/home')
                    .then(loadRoute(cb))
                    .catch(errorLoading);
            }}
        />
    </Route>
</Router>

And in this AppContainer I have:

class AppContainer extends Component {
    render() {
        return (
            <MuiThemeProvider muiTheme={muiTheme}>
                <div className="content">
                    <h1>Here is my app</h1>
                    {this.props.children}
                </div>
            </MuiThemeProvider>
        );
    }
}