React inline elements transform error for namespaced JSX components using named import (T7021)

[babel-bot]

Issue originally made by @mavisd

Bug information

• Babel version: 6.4.5
• Node version: 5.5.0
• npm version: 3.3.12

Options

.babelrc

{
    "presets": ["es2015", "react"],
    "plugins": ["transform-react-inline-elements"]
}

Input code

//export.js file
function TestComponent() {
    return null;
}

export const form = {
    TestComponent
};

//index.js file
import { form } from './export';

function ParentComponent() {
    return <form.TestComponent />;
}

//babel output for index.js file with transform-react-inline-elements plugin
'use strict';

var _jsx = function () { var REACT_ELEMENT_TYPE = typeof Symbol === "function" && Symbol.for && Symbol.for("react.element") || 0xeac7; return function createRawReactElement(type, props, key, children) { var defaultProps = type && type.defaultProps; var childrenLength = arguments.length - 3; if (!props && childrenLength !== 0) { props = {}; } if (props && defaultProps) { for (var propName in defaultProps) { if (props[propName] === void 0) { props[propName] = defaultProps[propName]; } } } else if (!props) { props = defaultProps || {}; } if (childrenLength === 1) { props.children = children; } else if (childrenLength > 1) { var childArray = Array(childrenLength); for (var i = 0; i < childrenLength; i++) { childArray[i] = arguments[i + 3]; } props.children = childArray; } return { $$typeof: REACT_ELEMENT_TYPE, type: type, key: key === undefined ? null : '' + key, ref: null, props: props, _owner: null }; }; }();

var _export = require('./export');

function ParentComponent() {
    return _jsx(form.TestComponent, {});
}

//babel output for index.js file **without** transform-react-inline-elements
'use strict';

var _export = require('./export');

function ParentComponent() {
    return React.createElement(_export.form.TestComponent, null);
}

Description

When using the React inline elements transform, a namespaced JSX component from a named import is transformed incorrectly. It drops the root import alias name (_export in this case) and leaves only the named import part (form in this case) without reference to the actual import alias, causing a ReferenceError.

[DrewML]

@mavisd thanks for the report!

I'm a bit on the fence about how this should work.

For context, the reason this is not working for you is because the form identifier is lowercase. If you were to change the import in index.js to import { form as Form } from './export';, your code would work as expected.

The bug fix here from June of last year is what leads to this behavior. The issue for this change makes mention of this gist that specifies that all lowercase identifiers in JSX should be treated as an HTML tag, and not a custom component. However, it does not specify the proper handling for that in the case of a JSXMemberExpression.

Edit: Thinking about this more, it doesn't make sense to ever treat a JSXMemberExpression as an HTML tag. Will have a PR with a fix in shortly.