Issue 1:
Issue originally made by @ekaradon

Bug information

Babel version: 6.9.2

Node version: 6.2.0

npm version: 3.9.3

Options

{
"name": "react-es6-webpack-boilerplate",
"version": "4.0.0",
"description": "Boilerplate for kick starting a React Project with ES6 (Babel) and Hot reloader using Webpack.",
"main": "index.js",
"scripts": {
"start": "node server.js",
"build": "BABEL_ENV=production ./node_modules/.bin/webpack --config webpack.config.production.js",
"lint": "./node_modules/.bin/eslint ."
},
"repository": {
"type": "git",
"url": "https://github.com/vasanthk/react-es6-webpack-boilerplate.git"
},
"keywords": [
"react",
"es6",
"babel",
"webpack"
],
"author": "Vasanth Krishnamoorthy (http://www.vasanthk.com)",
"license": "MIT",
"bugs": {
"url": "https://github.com/vasanthk/react-es6-webpack-boilerplate/issues"
},
"homepage": "https://github.com/vasanthk/react-es6-webpack-boilerplate",
"dependencies": {
"babel-runtime": "^6.9.2",
"react": "^15.1.0",
"react-dom": "^15.1.0"
},
"devDependencies": {
"babel-core": "6.9.1",
"babel-eslint": "6.0.4",
"babel-loader": "6.2.4",
"babel-plugin-react-transform": "2.0.2",
"babel-plugin-transform-react-constant-elements": "6.9.1",
"babel-plugin-transform-runtime": "6.9.0",
"babel-preset-es2015": "6.9.0",
"babel-preset-react": "6.5.0",
"babel-preset-stage-0": "6.5.0",
"eslint": "2.11.1",
"eslint-plugin-react": "5.1.1",
"react-transform-hmr": "1.0.4",
"webpack": "1.13.1",
"webpack-dev-server": "1.14.1"
}
}

Input code

import React, {Component} from 'react';

const data = [1, 2, 3, 4];

function Bar({number}) {
return <div>Number is {number}</div>
}

function Foo({item}) {

function give_number_through_a_fake_function() {
return item;
}

function render_bug() {
return (
<div>
<div>Here the bug</div>
<Bar number={item}/>
</div>
);
}

return (
<div>
The bug will occur
{render_bug()}
</div>
);
}

function render_as_foo(item) {
return <Foo item={item}/>;
}

export default class App extends Component {
render() {
return (
<div>
<h1>Hello, World!</h1>
{data.map(render_as_foo)}
</div>
);
}
}

Description

The props given in the example above (number) are consistently swallowed. They are undefined for the component Bar while it is defined in the component Foo. Furthermore, if using the function give_number_through_a_fake_function is used in order to give the props to the component Bar, then, it is working again.

The case is reproducible, I have pushed the full example here:

https://github.com/ekaradon/react-es6-webpack-boilerplate

Issue 2:
Input Code

import React from 'react'
import ReactDOM from 'react-dom'

const GrandChildComp = ({ text }) => <p>{text}</p>

const ChildComp = ({ text }) => {
const foo = (() => <GrandChildComp text={text} />)()
return <div>{foo}</div>
}

const ParentComp = () => <ChildComp text="Hello World" />

ReactDOM.render(<ParentComp />, document.getElementById('root'))

Babel Configuration (.bablerc, package.json, cli command)

{
"plugins": ["transform-react-constant-elements"],
"presets": ["react", "latest"],
}

or

babel src/index.js --presets 'react,latest' --plugins 'transform-react-constant-elements'

Expected Behavior

React should render <div><p>Hello World</p></div>

Current Behavior

Instead, React renders <div><p></p></div>

Context

const foo = (() => <GrandChildComp text={text} />)() gets screwed up here because of parameter destructuring.

Here's the important lines: https://gist.github.com/kaatt/794b7f306449dc605aaec6ff58edb372#file-with-constant-elements-js-L25-L27

So, it works fine if you replace const ChildComp = ({ text }) => { with

const ChildComp = (props) => {
const { text } = props
// ...

Your Environment

software
version

Babel
^6.9.1

node
6.3.0

npm
3.10.3