Cannot use JSX unless the ‘–jsx’ flag is provided

by

Every time I run npm start, it overrides whatever I configure in {jsx: ...} with react-jsx in order to be compatible with JSX transform in React 17.

The following changes are being made to your tsconfig.json file:
  - compilerOptions.jsx must be react-jsx (to support the new JSX transform in React 17)

The problem is VSCode using an older version of typescript (4.0.3), while the typescript version shipped with the project is (4.1.2).

The following did the trick for me:

  1. Go to the command palette CTRL+Shift+P (Or ⌘+Shift+P on Mac).
  2. Choose “TypeScript: Select a TypeScript Version…”.
  3. Choose “Use workspace Version”.

VSCode status bar

VSCode command palette

TypeScript workspace version

PS: This option doesn’t show though unless you’re on any .tsx file (thanks @awran5 for your comment and good catch)

More Related Contents:

  1. How to define css variables in style attribute in React and TypeScript
  2. Default property value in React component using TypeScript
  3. How do I type this ‘as’ JSX attribute in TypeScript?
  4. Typescript + React/Redux: Property “XXX” does not exist on type ‘IntrinsicAttributes & IntrinsicClassAttributes
  5. Dynamic tag name in React JSX
  6. React: Expected an assignment or function call and instead saw an expression
  7. Typescript input onchange event.target.value
  8. What does the error “JSX element type ‘…’ does not have any construct or call signatures” mean?
  9. Property ‘value’ does not exist on type ‘Readonly’
  10. How do I restrict the type of React Children in TypeScript, using the newly added support in TypeScript 2.3?
  11. You should not use outside a
  12. Typescript image import
  13. mobx-react observer don’t fires when I set observable
  14. Set loading state before and after an action in a React class component
  15. Line 0: Parsing error: Cannot read property ‘map’ of undefined
  16. Set types on useState React Hook with TypeScript
  17. Visual studio code changes format (React-JSX)
  18. Importing images in TypeScript React – “Cannot find module”
  19. What does the colon mean in Javascript after function?
  20. React Hooks – Modified state not reflecting immediately
  21. React Hooks – Modified state not reflecting immediately
  22. Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema
  23. React with Typescript — Generics while using React.forwardRef
  24. is it possible to React.useState(() => {}) in React?
  25. Warning: Prop `className` did not match. when using styled components with semantic-ui-react
  26. Typescript React: Access component property types
  27. Passing object as props to jsx
  28. How to assign the correct typing to React.cloneElement when giving properties to children?
  29. React and TypeScript—which types for an Axios response?
  30. Create-React-App build – “Uncaught SyntaxError: Unexpected token

Leave a Comment