Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Parse error with ternary in JSX with mixed variables and JSX #24121

Closed
Guria opened this issue May 15, 2018 · 1 comment
Closed

Parse error with ternary in JSX with mixed variables and JSX #24121

Guria opened this issue May 15, 2018 · 1 comment
Assignees
Labels
Bug A bug in TypeScript Fixed A PR has been merged for this issue

Comments

@Guria
Copy link

Guria commented May 15, 2018

TypeScript Version: 2.9.0-dev.20180515

Search Terms: ternary, ternary tsx

Code

Here is working code

import * as React from "react";
const emptyMessage = <div>empty</div>;
const length = 0;
const totalItemsCount = 10;
const getPlural = (...args: any[]) => "";
const a = (
  <div>
    <div>
      {length ? emptyMessage : (
        <span>
          Всего {totalItemsCount}{" "}
          {getPlural(totalItemsCount, ["услуга", "услуги", "услуг"])} в этом
          разделе
        </span>
      )}
    </div>
  </div>
);

after applying prettier on this code we have:

import * as React from "react";
const emptyMessage = <div>empty</div>;
const length = 0;
const totalItemsCount = 10;
const getPlural = (...args: any[]) => "";
const a = (
  <div>
    <div>
      {length ? (
        emptyMessage
      ) : (
        <span>
          Всего {totalItemsCount}{" "}
          {getPlural(totalItemsCount, ["услуга", "услуги", "услуг"])} в этом
          разделе
        </span>
      )}
    </div>
  </div>
);

As we see prettier added a parenthesis around emptyMessage which shouldn't affect parsing since this is a valid syntax. But typescript reports error:

[ts] A function whose declared type is neither 'void' nor 'any' must return a value.

The interesting part here, that if we simplify else part it will start work again:

import * as React from "react";
const emptyMessage = <div>empty</div>;
const length = 0;
const totalItemsCount = 10;
const getPlural = (...args: any[]) => "";
const a = (
  <div>
    <div>
      {length ? (
        emptyMessage
      ) : (
        <span>
          {getPlural(totalItemsCount, ["услуга", "услуги", "услуг"])} в этом
          разделе
        </span>
      )}
    </div>
  </div>
);

It appears enough to remove first line Всего {totalItemsCount}{" "} inside span where we have string literal, and 2 expressions.
I tried to change this first line in different combinations (just literal, just expressions, etc) but only complete removal of this exact line helps. o_O

Expected behavior: Compile in any case above

Actual behavior: Some cases led to parsing error

Playground Link: https://codesandbox.io/s/3z83kpxp1 (hit Prettify icon in top right corner under profile menu)

Related Issues: #16241

I am starting issue here and not in prettier repo, since I am sure that all snippets above are valid syntax,

@Guria
Copy link
Author

Guria commented May 16, 2018

Wow, that was fast.
Impressive.

@mhegazy mhegazy added the Fixed A PR has been merged for this issue label May 16, 2018
@microsoft microsoft locked and limited conversation to collaborators Jul 31, 2018
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Bug A bug in TypeScript Fixed A PR has been merged for this issue
Projects
None yet
Development

No branches or pull requests

4 participants