Comments in-line with JSX elements cause Invariant Violation error

[kernel-sanders]

• [ X ] Review the documentation: https://facebook.github.io/react-native
• [ X ] Search for existing issues: https://github.com/facebook/react-native/issues
• [ X ] Use the latest React Native release: https://github.com/facebook/react-native/releases

Environment

React Native Environment Info:

 System:
 OS: macOS 10.14.1
 CPU: x64 Intel(R) Core(TM) i9-8950HK CPU @ 2.90GHz
 Memory: 3.58 GB / 32.00 GB
 Shell: 5.3 - /bin/zsh
 Binaries:
 Node: 10.7.0 - /usr/local/bin/node
 npm: 6.4.0 - /usr/local/bin/npm
 Watchman: 4.9.0 - /usr/local/bin/watchman
 SDKs:
 iOS SDK:
 Platforms: iOS 12.1, macOS 10.14, tvOS 12.1, watchOS 5.1
 IDEs:
 Xcode: 10.1/10B61 - /usr/bin/xcodebuild
 npmPackages:
 react: 16.6.0-alpha.8af6728 => 16.6.0-alpha.8af6728
 react-native: 0.57.4 => 0.57.4
 npmGlobalPackages:
 react-native-cli: 2.0.1
 react-native-git-upgrade: 0.2.7
 react-native-vector-icons: 4.6.0

Description

In line comments break react-native 56+, as shown in the code and repo below. Removing "This comment breaks the app" allows the app to run. Comments on lines by themselves seem to be ok.

export default class App extends Component<Props> {
 render() {
 return (
 <View style={styles.container}>
 {/* This comment is ok */}
 <Text style={styles.welcome}>Welcome to React Native!</Text> {/* This comment breaks the app */}
 <Text style={styles.instructions}>To get started, edit App.js</Text>
 <Text style={styles.instructions}>{instructions}</Text>
 </View>
 );
 }
}

Possibly linked to: #20084

Reproducible Demo

https://github.com/kernel-sanders/ReactNative56TextBug

[radex]

This is most likely a Babel bug. See how the compiled JS looks like

[JKCooper2]

Repro: https://snack.expo.io/@jkcooper/rn-afterline-comments

[satya164]

This happens because of the whitespace before the comment:

</Text> {/*

The whitespace is recognized as a string as per JSX's parsing rules which causes an error in RN due to being outside Text.

If you remove this whitespace, it works:

</Text>{/*

Closing since this is the expected behaviour.