Commenting a comment in a react component breaks source file

[preslavmihaylov]

Given the file:

// @flow
import * as React from 'react';

export default function Foo() {
  return (
    <div>
      {/* some comment */}
      <div>Bar</div>
    </div>
  );
}

Do steps:

1. Visual-select the comment line and the Bar line
2. Comment the lines using vim-commentary (gc)

Result:

// @flow
import * as React from 'react';

export default function Foo() {
  return (
    <div>
      {/* {1/* some comment */1} */}
      {/* <div>Bar</div> */}
    </div>
  );
}

The comment line is broken and I have to manually go and fix it.

I expected the commented comment to look like this:

{/* {/* some comment *\/} */}

[tpope]

Uncommenting undoes it. What's wrong with Commentary's syntax, and how is it supposed to know you prefer a different syntax?

[preslavmihaylov]

The react component doesnt render with this syntax

I will provide a screenshot later, busy atm.

[tpope]

I suppose non-functioning code is a valid objection. Would changing it to {/1* ... *1/} do the trick?

[preslavmihaylov]

Here's how the component renders without commenting anything:

Here's how it renders after commenting the lines mentioned out:

The suggestion you made works and the component is rendered properly this way:

(a blank page is expected)