Bug: Last JSX tag returned, when compiler should throw error

[remoteportal]

Because of the parenthesis BOTH tags should be included in the return statement. In error only the last one is:

CoffeeScript:

		JSXFunction = -> (
				<Row>ABC</Row>
				<Row>DEF</Row>
			)

Errant JavaScript:

// Generated by CoffeeScript 2.2.4
  JSXFunction = function() {
        <Row>ABC</Row>;
        return <Row>DEF</Row>;
      };

Correct JavaScript:

  JSXFunction = function() {
        return <Row>ABC</Row>
            <Row>DEF</Row>;
      };

[connec]

Ah, I take it that's the point - that the CoffeeScript makes for a hard-to-catch bug?

[microdou]

I don't think it's a bug. I believe that you cannot return two jsx fragments at the same time.

You have to manually wrap the two jsx tags into one using either array, or the new Fragment notation in React, as follows:

f = -> [<A />, <B />]

f = ->
  <>
    <A />
    <B />
  </>

[GeoffreyBooth]

@xixixao, your thoughts?

[zdenko]

@GeoffreyBooth I think @microdou is right. JSX elements must be wrapped in an enclosing tag (example)

This JS example works:

var JSXFunction = function() {
  return <div>
    <Row>ABC</Row>
    <Row>DEF</Row>
  </div>;
};

Also this

var JSXFunction = function() {
  return [
    <Row>ABC</Row>,
    <Row>DEF</Row>
  ];
};

[connec]

I think maybe the issue is that if you mistakenly typed:

jsxFunction = () => (
    <Row>ABC</Row>
    <Row>DEF</Row>
)

In JavaScript, you would get a syntax error whereas in CoffeeScript the second tag is returned:

jsxFunction = () => (
    <Row>ABC</Row>
    <Row>DEF</Row>
)

var jsxFunction;

jsxFunction = () => {
  <Row>ABC</Row>;
  return <Row>DEF</Row>;
};

Personally, I didn't realise () had the same comma-ellision as {} and []:

(
  1
  2
  3
)
# becomes (1, 2, 3)

[microdou]

My understanding is @remoteportal wants the function to return two JSX elements which really doesn't work that way.

@connec made a good point. CoffeeScript should raise an error if a user intends to return adjacent JSX elements, just as JavaScript does.
Adjacent JSX elements must be wrapped in an enclosing tag

[stevefan1999-personal]

You cannot do this in JS either. You need to return an array or fragment.

[GeoffreyBooth]

Yes, I think the bug is that CoffeeScript returns the closing tag, rather than throwing an error.

[GeoffreyBooth]

@xixixao or @zdenko, do either of you want to take a crack at making sure code like the following throws an error, rather than compiling to incorrect JSX?

render = -> (
  <Row>ABC</Row>
  <Row>DEF</Row>
)

[GeoffreyBooth]

@remoteportal @stevefan1999 @connec @microdou @zdenko please see #5046 (comment). I think my fix might’ve made things worse. I would appreciate your feedback.

[zdenko]

@GeoffreyBooth hold my beer. #5049