transform-react-constant-elements v6.23.0: Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.

[hackhat]

Provide a general summary of the issue in the title above

When enabling transform-react-constant-elements@v6.23.0 I got this error: Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. If I disable it doesn't break the code.

Input Code

class LandingPageB extends React.Component {
  render() {
    return (
      <div className={cx(s.root)}>
        <Separator/>
        <Separator/>
      </div>
    );
  }
}

const Separator = () => (
  <div className={s.separator}></div>
);

But this code works?!:

const Separator = () => (
  <div className={s.separator}></div>
);
class LandingPageB extends React.Component {
  render() {
    return (
      <div className={cx(s.root)}>
        <Separator/>
        <Separator/>
      </div>
    );
  }
}

Noticed that I've moved the Separator up and now it works?

also this code also works:

class LandingPageB extends React.Component {
  render() {
    return (
      <div className={cx(s.root)}>
        <Separator/>
        <Separator/>
      </div>
    );
  }
}
const Separator = ({}) => ( // <= added `{}` here
  <div className={s.separator}></div>
);

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

Babel loader for webpack 1
DEBUG = true

        {
          test: /\.jsx?$/,
          loader: 'babel-loader',
          include: [
            path.resolve(__dirname, '../node_modules/react-routing/src'),
            path.resolve(__dirname, '../src'),
          ],
          query: {
            // https://github.com/babel/babel-loader#options
            cacheDirectory: DEBUG,

            // https://babeljs.io/docs/usage/options/
            babelrc: false,
            presets: [
              'react',
              'es2015',
              'stage-0',
            ],
            plugins: [
              'transform-runtime',
              'transform-decorators-legacy',
              ...DEBUG ? [] : [ // xxx
                // 'transform-react-remove-prop-types',
                'transform-react-constant-elements', // <-- this breaks the code
                // 'transform-react-inline-elements',
              ],
            ],
          },
        },

Expected Behavior

No breaking code

Current Behavior

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

Possible Solution

No idea yet, sorry.

Context

Somehow it broke, not sure why, but it was working a few weeks ago. Related: http://hackhat.com/p/329/how-to-deal-with-production-only-bugs/

Your Environment

software	version
Babel(cli,core)	6.24.0
node	v7.2.0
npm	3.10.9
Operating System	win 10 64bit

[babel-bot]

Hey @hackhat! We really appreciate you taking the time to report an issue. The collaborators
on this project attempt to help as many people as possible, but we're a limited number of volunteers,
so it's possible this won't be addressed swiftly.

If you need any help, or just have general Babel or JavaScript questions, we have a vibrant Slack
community that typically always has someone willing to help. You can sign-up here
for an invite.

[brantphoto]

@hackhat I only had a second to look at this but the problem looks to be that ES6 classes don't hoist. http://stackoverflow.com/questions/35537619/why-are-es6-classes-not-hoisted

[hackhat]

@brantphoto Thanks, but actually is not a hoisting issue. Is just an optimisation issue. By the time the component uses the class, the class has already been defined (long time).

[brantphoto]

@hackhat ah, I read your post on you site and now I get it. I would fix the examples in this ticket, as they are inaccurate and not consistent with your post (such as only using one component example missing).

[hackhat]

@brantphoto thanks

[apaatsio]

I ran the first example with

babel --presets=es2015,stage-0,react --plugins=transform-runtime,transform-decorators-legacy,transform-react-constant-elements example.js

I'm not getting any errors. Using babel-core@6.24.1.

[tailsu]

I get the same error with the following config:

  {
    "presets": ["latest"],
    "plugins": [
      "syntax-jsx",
      "transform-decorators-legacy",
      "transform-class-properties",
      "transform-object-rest-spread",
      "transform-react-jsx",
      "transform-react-constant-elements",
      "transform-react-inline-elements",
    ]
  }

Version of everything is ^6, that is latest with major version 6. Removing transform-react-constant-elements fixes the issue.

Sorry that I can't provide a repro.

[brantphoto]

@tailsu try switching the order of "transform-react-constant-elements" &"transform-react-inline-elements".

[nicolo-ribaudo]

I can't reproduce this in Babel 7: both with the original config and with @tailsu 's config, I get similar outputs:

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));

var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));

var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));

var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));

var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));

var LandingPageB =
/*#__PURE__*/
function (_React$Component) {
  (0, _inherits2["default"])(LandingPageB, _React$Component);

  function LandingPageB() {
    (0, _classCallCheck2["default"])(this, LandingPageB);
    return (0, _possibleConstructorReturn2["default"])(this, (0, _getPrototypeOf2["default"])(LandingPageB).apply(this, arguments));
  }

  (0, _createClass2["default"])(LandingPageB, [{
    key: "render",
    value: function render() {
      return React.createElement("div", {
        className: cx(s.root)
      }, _ref, _ref2);
    }
  }]);
  return LandingPageB;
}(React.Component);

var Separator = function Separator() {
  return React.createElement("div", {
    className: s.separator
  });
},
    _ref2 =
/*#__PURE__*/
React.createElement(Separator, null),
    _ref =
/*#__PURE__*/
React.createElement(Separator, null);