Syntax JSX: Property name of JSXOpeneningElement expected node to be of a type ["JSXIdentifier", "JSXMemberExpression"] but instead got "MemberExpression". (T6976)

[babel-bot]

Issue originally made by @jayzawrotny

Bug information

• Babel version: 6.4.0
• Node version: 5.3.0
• npm version: 3.3.12

Options

{
        "babelrc": false,
        "presets": ["stage-0"],
        "plugins": ["syntax-jsx", "transform-es2015-modules-commonjs"],
        "sourceMap": false
}

Input code

import fs from 'fs';

const JSXFileContents = fs.readFileSync('SomeFile.jsx');

let result = babel.transform(JSXFileContents, {
    filename: 'SomeFile.jsx',
    babelrc: false,
    presets: ['stage-0'],
    plugins: ['syntax-jsx', 'transform-es2015-modules-commonjs'],
    sourceMap: false
});

Description

The intention was to be able to parse a JSX file but not transform it. However, the following error occurs when babel is transforming my source file. A temporary workaround was to use transform-react-jsx where no error is thrown. While this solution works for now it slows down my module significantly having to transform the JSX for several hundred files.

TypeError: home.app.js: Property name of JSXOpeningElement expected node to be of a type ["JSXIdentifier","JSXMemberExpression"] but instead got "MemberExpression"
    at Object.validate (/Users/jay/Projects/node/rick-tracy/node_modules/babel-types/lib/definitions/index.js:101:13)
    at Object.validate (/Users/jay/Projects/node/rick-tracy/node_modules/babel-types/lib/index.js:268:9)
    at NodePath._replaceWith (/Users/jay/Projects/node/rick-tracy/node_modules/babel-traverse/lib/path/replacement.js:201:7)
    at NodePath.replaceWith (/Users/jay/Projects/node/rick-tracy/node_modules/babel-traverse/lib/path/replacement.js:179:8)
    at Object.ReferencedIdentifier (/Users/jay/Projects/Vagrant/venuebook/workspace/venuebook/gulp/node_modules/babel-plugin-transform-es2015-modules-commonjs/lib/index.js:56:14)
    at Object.newFn (/Users/jay/Projects/node/rick-tracy/node_modules/babel-traverse/lib/visitors.js:309:17)
    at NodePath._call (/Users/jay/Projects/node/rick-tracy/node_modules/babel-traverse/lib/path/context.js:74:18)
    at NodePath.call (/Users/jay/Projects/node/rick-tracy/node_modules/babel-traverse/lib/path/context.js:46:17)
    at NodePath.visit (/Users/jay/Projects/node/rick-tracy/node_modules/babel-traverse/lib/path/context.js:104:12)
    at TraversalContext.visitQueue (/Users/jay/Projects/node/rick-tracy/node_modules/babel-traverse/lib/context.js:153:16)
    at TraversalContext.visitSingle (/Users/jay/Projects/node/rick-tracy/node_modules/babel-traverse/lib/context.js:113:19)
    at TraversalContext.visit (/Users/jay/Projects/node/rick-tracy/node_modules/babel-traverse/lib/context.js:197:19)
    at Function.traverse.node (/Users/jay/Projects/node/rick-tracy/node_modules/babel-traverse/lib/index.js:139:17)
    at NodePath.visit (/Users/jay/Projects/node/rick-tracy/node_modules/babel-traverse/lib/path/context.js:114:22)
    at TraversalContext.visitQueue (/Users/jay/Projects/node/rick-tracy/node_modules/babel-traverse/lib/context.js:153:16)
    at TraversalContext.visitSingle (/Users/jay/Projects/node/rick-tracy/node_modules/babel-traverse/lib/context.js:113:19)
    at TraversalContext.visit (/Users/jay/Projects/node/rick-tracy/node_modules/babel-traverse/lib/context.js:197:19)
    at Function.traverse.node (/Users/jay/Projects/node/rick-tracy/node_modules/babel-traverse/lib/index.js:139:17)

If the JSX source is needed I can supply it but it's been happening with multiple JSX files which is what convinces me it has more to do with the babel plugin than my source code.

[babel-bot]

Comment originally made by @jmm

Hello @eccentric_j.

If the JSX source is needed I can supply it but it's been happening with multiple JSX files which is what convinces me it has more to do with the babel plugin than my source code.

I can't imagine anyone is going to be willing to attempt to debug this without sample input that triggers it (I know I'm not). In fact, a //minimal// runable reproduction would be best. If you need help getting started you can check out https://github.com/miniminirepro/babel.

[babel-bot]

Comment originally made by @jayzawrotny

@jmm Ah that makes total sense.

Here is the repro repo https://github.com/jayzawrotny/minirepro-babel-syntax-jsx-error.

Fortunately I was able to boil it right down to a very specific case with a minimal set of code.

[babel-bot]

Comment originally made by @jmm

@eccentric_j thanks, that's a great start, but src/ is missing. (That's why in the instructions I recommend cloning the repro repo and following the instructions at the end to make sure it works.) Some other notes:

• The starter I suggested is designed to leave the instructions below "delete from this line up" so people can see right away how to run it. I only knew right off the bat because I created that starter.
• This really needs the stage-0 preset to repro? If not it would be much better to exclude it.

[babel-bot]

Comment originally made by @jayzawrotny

@jmm Eeek I thought, "It's cool I got this." Clearly I do not :P Anyway, I have made the requested changes & double cloned the repro and ran it to ensure it works.

Good call on the stage-0. I wanted to recreate the exact settings I was using but forgot to rule it out so it too has been removed.

[babel-bot]

Comment originally made by @jmm

@eccentric_j Thanks for the updated repo. I'm now able to reproduce, though the input code can be trimmed by 96%. This is a result of importing to an identifier that's used as a JSX identifier, e.g.:

import X from 'x'
<X />

Please update your repo with a dist/expected.js that shows exactly the output you hope to achieve.

[babel-bot]

Comment originally made by @jmm

^^ after merging my PR.

[babel-bot]

Comment originally made by @jayzawrotny

Ok, I pushed up a dist/expected.js and I made my best guess for what the output should look like.

[babel-bot]

Comment originally made by @atombender

Any progress on this? Or instructions for how to work around it, or a known stable version where it doesn't occur? We just tried upgrading to Babel 6.x, and this is blocking us.

[babel-bot]

Comment originally made by @atombender

Ah, looks like transform-react-jsx still works, instead of syntax-jsx.

[DrewML]

@jayzawrotny The src in that repository doesn't match the actual.js. Having said that, this looks like the same issue as seen in #3728, which will be fixed when #4763 is merged/released.

[valclark1]

I added transform-react-jsx to my .babelrc and that did the job for me.

[hzoo]

Ok closing