JSX in function results in Unexpected JSXIdentifier

[radekmie]

This code:

const X = x();
<X />

Is correctly minified to:

"use strict";var X=x();React.createElement(X,null);

This code:

const render = () => {
    const X = x();

    return (
        <X />
    );
}

Results with:

Unexpected JSXIdentifier. Expected an Identifier

This occurs in Babel REPL - when I used CLI, I've received minified version of something like this:

const a = () => {  // minified name - OK
    const b = x(); // minified name - OK

    return (
        <X /> // oops!
    );
}

[boopathi]

The first one works because it is in the global scope and is not mangled.

I'm not sure why that errors in REPL.

For the last case, consider this workaround for now - use passPerPreset=true option when using with react preset. Have to debug why mangler skips that path after transforming to React.createElement.

[radekmie]

The first one works because it is in the global scope and is not mangled.

Good to know.

For the last case, consider this workaround for now - use passPerPreset=true option when using with react preset. Have to debug why mangler skips that path after transforming to React.createElement.

I'm using babel-preset-babili ("presets": ["babili", ...]) - how can I pass this option?

EDIT: OK, found it. I'll try it later today and let you know.
EDIT 2: I've tried it - same error.

[boopathi]

console.log(require('babel-core').transform(`
const render = () => {
  const Foo = x();
  return <Foo/>;
}`, {
  presets: ['react', 'babili'],
  passPerPreset: true
}).code);

And I get the output

const render = () => {
    const a = x();
    return React.createElement(a, null);
};

[radekmie]

OK, maybe I mistyped passPerPreset or something.