Bug issue with babel-plugin-transform-react-constant-elements

[velopert]

When I work on my React Project, I usually put the component files in a directory and create a index.js so that I can load the components like import { UserInfo, AnotherComponent } from 'container';

Today, I tried using that structure with create-react-app. It works perfectly on the dev-server, but it gives following error when I try to load the component:

React: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.

My have uploaded the directory structure and codes on gist: https://gist.github.com/velopert/ab6e132d73a17930c90e3e38493c12ed

It seems like there's no problem if I import and render the components from outside of the directory.
(For example, I can import and render App component from src/index.js, if I do not render UserInfo from App component). I tried console.log() from App, and it seems like there is no problem with importing the module. I think there is an issue with rendering it.

Anyways, I just have found out that the babel-plugin-transform-react-constant-elements is the one that causes problem. I commented out the babel-plugin-transform-react-constant-elements part from the babel.prod.js and it works fine again.

Thanks !

[gaearon]

This sounds bad. Can you search Babel Phabricator for relevant issues so we can track this? I would not be surprised if similar reports already exist.

[hzoo]

From babel/babel#3596 (comment): https://phabricator.babeljs.io/T7520 cc @kittens

Although there are a few of these: https://phabricator.babeljs.io/search/query/pCNlnC2xzwzx/#R

[gaearon]

Okay I’m going to disable this transform because it’s buggy.
This is really unfortunate. 😢

[gaearon]

Fixed for now in 0.3.0+ by disabling that plugin.

[kaatt]

Also check: babel/babel#4516