Material-ui: Failed prop type: Invalid prop `children` supplied to `EnhancedButton`, expected a ReactNode.

[kozlikov]

1) create new project
2) npm install

Problem description

not valid

<FlatButton label="add" icon={<SvgIconAddShoppingCart />} />

import React from "react";
import { render } from "react-dom";
import onTouchTapEvent from "react-tap-event-plugin";
import MuiThemeProvider from "material-ui/styles/MuiThemeProvider";


import FlatButton from "material-ui/FlatButton";
import SvgIconAddShoppingCart from "material-ui/svg-icons/action/add-shopping-cart";


onTouchTapEvent();

const Test = () => (
  <div>

    <FlatButton label="add" icon={<SvgIconAddShoppingCart />}/>

    <FlatButton icon={<SvgIconAddShoppingCart/>}/>

    <FlatButton label="add"/>

  </div>
);

render(
  <MuiThemeProvider>
    <Test/>
  </MuiThemeProvider>, document.getElementById('app')
);

Versions

• Material-UI: 0.17.1
• React: 15.4.*
• Browser: Chrome, FireFox, Opera, .... (ALL Browser)

[mbrookes]

Unable to reproduce: https://www.webpackbin.com/bins/-Kh7G86UTg0ckGC2hL94

[VasilyShelkov]

I have this exact same problem, only started today... can not for the life of me figure out why :S

Exact same symptons, take away the Icon and works as normal.

I can not see any new releases so seems very strange that this has only started today

[VasilyShelkov]

Worth mentioning that in my case it is bundling with Webpack 2, struggling to find out what version of webpack webpackbin is using...really cool site though

@mbrookes download that project from your webpackbin link and run it, the error is then reproduced (on latest chrome and mozilla, OSX El Capitan although I would be surprised if the OS makes a difference)

[kozlikov]

I'm sorry, but, please, start locally, but before that, create a new project and do npm install.
In this case You get to emulate the error that just started today.
PS I work with windows 10

[kozlikov]

This error occurs because the new version react 15.5.* .
In material UI set package "react-addons-create-fragment": ^15.4.0, toe is, when updating packages in fact will be installed "react-addons-create-fragment": 15.5.*

You can fix this error two ways, lokalno in the package.json to specify the "react-addons-create-fragment": 15.4.*
or developers materail UI to change the version of the package in the package.json

temp fix:
npm install [email protected].* --save
npm install [email protected].* --save

[clayne11]

I'm getting this as well with React 15.5.3.

[clayne11]

It seems to be related to react-addons-create-fragment in React 15.5.

[kozlikov]

@clayne11 the solution to the problem https://github.com/callemall/material-ui/issues/6552#issuecomment-292740859

[mbrookes]

react-addons-*@0.15.x should not have breaking changes.

Either something has been fixed in those libs that Material-UI was depending on (so needs to be fixed in MUI), or something has broken on their side.

We could pin MUI at 0.14.2 while we get to the bottom of the issue or move away from these utils. transition-group should be straightforward: https://facebook.github.io/react/blog/2017/04/07/react-v15.5.0.html#discontinuing-support-for-react-addons

[mbrookes]

Looks like it was fixed 15 hours ago: https://github.com/facebook/react/tree/15.5-dev/addons/react-addons-create-fragment, and released 10 hours ago: https://www.npmjs.com/package/react-addons-create-fragment

You'll need to forcibly upgrade to that version.

[kozlikov]

@mbrookes Thank you. Indeed, the bug was fixed in the package react-addons-create-fragment: 15.5.3. Topic can be closed, problem solved.

[gaearon]

Sorry, we messed up the release and accidentally pushed a wrong version to npm.

[mbrookes]

@gaearon NP. You guys have had a lot going on. Thanks for stopping by!

[carlchampain]

Hi there!
I'm getting a similar warning as Kozlikov:

• Warning: Failed prop type: Invalid prop children supplied to TransitionGroup, expected a ReactNode.
  in TransitionGroup (created by CSSTransitionGroup)
  in CSSTransitionGroup (at MapContainer.js:190)
  in div (at MapContainer.js:189)
  in MapContainer (created by Wrapper)
  in div (created by Wrapper)
  in Wrapper (at App.js:30)
  in div (at App.js:17)
  in MuiThemeProvider (at App.js:16)
  in App (at index.js:7)

And these are my dependencies:

"axios": "^0.18.0",
"google-map-react": "^0.34.0",
"google-maps-react": "^1.1.11",
"material-design-icons": "^3.0.1",
"material-ui": "^0.20.0",
"material-ui-search-bar": "^0.4.1",
"react": "^16.3.2",
"react-addons-create-fragment": "^15.6.1",
"react-dom": "^16.3.2",
"react-load-script": "0.0.6",
"react-places-autocomplete": "^6.1.3",
"react-scripts": "1.1.1",
"react-transition-group": "^1.2.1"

Browser: Google Chrome 65.0.3325.181

Basically, I'm trying to animate a div while my app is loading data.
Worth mentioning that this is my first post on Github :) and also, I'm not sure if I'm at the right spot to solve my issue (is it related to MUI or CSSTransition or anything else). It would be great if someone could help me (either figuring out what's wrong or redirect me to the right place)!

Cheers!