Unable to use transform-react-inline-elements + transform-es2015-modules-commonjs with JSXMemberExpression (T6662)

[babel-bot]

Issue originally made by @tsing

Bug information

• Babel version: 6.2.0
• Node version: 5.1.0
• npm version: 3.3.12

Options

{
  "presets": [
    "react",
    "es2015",
    "stage-2"
  ],
  "env": {
    "production": {
      "plugins": [
        "transform-react-inline-elements"
      ]
    }
  }
}

Input code

/* @flow */

import React from 'react';
import {Modal} from 'react-bootstrap';

export default CustomModal = (props) => (
  <Modal show backdrop={props.backdrop}>
    <Modal.Header>{props.title}</Modal.Header>
    {props.children}
  </Modal>
);

Description

Use the command below to transpile the code
NODE_ENV=production babel xxx.js

will got error:

TypeError: xxx.js: Property object of JSXMemberExpression expected node to be of a type ["JSXIdentifier"] but instead got "MemberExpression"

[babel-bot]

Comment originally made by Aleš (ales)

problem is in Modal.Header

it is possible to temporarily fix this with const {Header: ModalHeader} = Modal; and then use

[babel-bot]

Comment originally made by Sam Skjonsberg (sams)

@ales

Yes, but with different syntax.

To fix this issue we did this:

import Router from 'react-router';
const Link = Router.Link;

[babel-bot]

Comment originally made by @thejameskyle

This actually comes down to an issue with babel-plugin-transform-es2015-modules-commonjs creating an invalid AST by putting a MemberExpression inside a JSXElement as it tries to replace:

<Obj.Prop/>

with

importName.default.Prop

https://github.com/thejameskyle/__babel-bug-T6662

[babel-bot]

Comment originally made by @phpnode

Ran into this issue, it's happening because the es2015-modules transform is running before the react presets. This .babelrc fixed the issue for me:

{
  "presets": [
    "react",
    "es2015",
    "stage-0"
  ],
  "passPerPreset": true
}

[babel-bot]

Comment originally made by @web2style

I had the same issue. This was caused by importing

import Form from 'react-formal';

like this and then using it like this:

<Form.Field />
<Form.Message />

Importing it like this:

import Form, {Field, Message} from 'react-formal';

and using like this:

<Field />
<Message />

solved the problem.

[klimashkin]

Still an issue.

import {PureComponent} from 'react';
import {Menu} from 'components';

export default class MainMenu extends PureComponent {
  render() {
    return (
      <Menu>
        <Menu.Item>Hello</Menu.Item>
      </Menu>
    );
  }
}

TypeError: unknown: Property object of JSXMemberExpression expected node to be of a type ["JSXMemberExpression","JSXIdentifier"] but instead got "MemberExpre

Moreover, if try destructuring to get static Item from Menu component:

import {PureComponent} from 'react';
import {Menu} from 'components';

const {Item} = Menu;

export default class MainMenu extends PureComponent {
  render() {
    return (
      <Menu>
        <Item>Hello</Item>
      </Menu>
    );
  }
}

this error occurs:
Error: unknown: File/Program node, we can't possibly find a statement parent to this

[faceyspacey]

I don't think having to rewrite your imports is a sufficient solution, since external dependencies would also have to be rewritten, and since the standard way some components are expected to be used is <Animated.View>.