Parsing error: argument for ‘–jsx’ option must be: ‘preserve’, ‘react-native’, ‘react’

The error message “parsing error: argument for ‘–jsx’ option must be: ‘preserve’, ‘react-native’, ‘react'” is usually encountered when trying to compile TypeScript code using incorrect –jsx option values.

The –jsx option specifies the target JSX transformation to be applied during the TypeScript compilation process. It can have three valid values:

1. preserve: This option ensures that JSX syntax is preserved as-is and not transformed into any other format. It is suitable when using custom JSX preprocessors or when transpiling code manually with additional tools.
2. react-native: This option is used to transform JSX syntax for React Native applications. It enables additional JSX-specific transformations required for React Native components.
3. react: This option transforms JSX syntax for React web applications. It is the most commonly used option when working with React.

To fix the parsing error, ensure that the –jsx option value is one of the valid values described above. Here are some examples:

• For preserving JSX syntax:

  tsc --jsx preserve app.tsx

• For React Native applications:

  tsc --jsx react-native app.tsx

• For React web applications:

  tsc --jsx react app.tsx