Files with comments in JSX are not being parsed if placed before an inline expression

[fluiddot]

Description

Looks like comments in JSX are not properly parsed by the command in some cases like when they are placed before an embedded inline expression, it fails with the following error:

Could not parse file <FILE_NAME>: Unclosed { (line 19, column 0)

How to reproduce it

1. Create an example JSX file with the following content and locate it in a folder (in this example I named the file example.js and the folder /example):

import React from 'react';
import { __ } from '@wordpress/i18n';

export default class Example extends React.Component {
	render() {
		return (
			<div className="example">
				{ /* This is a comment */ }
				{ this.props.items.map( ( item ) => {
					return <div key={ item.id }>{ item.name }</div>;
				} ) }
				<button onClick={ () => {} }>
					{ __( 'This is a button' ) }
				</button>
			</div>
		);
	}
}

NOTE: I managed to produce this issue with an empty block { } too, however, it works when adding any code, like for example { null } 🤔 .

2. Run command wp i18n make-pot example --ignore-domain --debug example.pot.
3. Observe that the command logs the error Could not parse file when parsing the file.
4. Observe that the POT file doesn't contain the This is a button string.

Expected result

Files that contain comments in JSX should be properly parsed.

In the previous example, the expected result in the POT file would be:

#: example.js:13
msgid "This is a button"
msgstr ""

Environment

• PHP version: 7.3.11
• WP-CLI 2.5.0

[swissspidy]

Thanks for your report.

I've confirmed this bug and filed an issue in the upstream library used for parsing: mck89/peast#42

[swissspidy]

This was now fixed upstream.

It will be resolved in WP-CLI with the next dependency updates.