This article briefly introduces a solution to the JSX syntax error in.tsx during update of Act17. Keywords: React17, typescript, JSX.

Causes and Phenomena

The reason is that Act17 offers a new, refactored JSX transformation. When you create a new application using create-react-app that supports typescript and uses ESLint, you will notice JSX syntax errors in the.tsx. Because the application uses the old JSX transformation by default, but the secondary dependency Babel is 7.9.0 and later, the application will run successfully, but it is not pleasing to look at.

The solution

The official said it was ok to continue using the old JSX transformation, but I chose to update the versions of individual libraries to support the new JSX transformation. My thinking is that since we already use Act17 there is no need to use the old JSX conversion, if we want to use act16 it doesn’t smell good.

Open dry.

Two things need to be changed. The first is the typescript version configuration of vscode and the second is the version of package.json for individual dependent libraries.

typescript

Open theSettingsRetrieve the “typescript TSDK “and check the first option: allow the user to be prompted to use the typescript version configured for Intellisense in the workspace. The following will upgrade the version of Typescript used in the workspace to4.1.2.

Make sure there is one at the root of the application.vscodeThere’s one in the foldersettings.jsonFile, which is shown below.

package.json

{
  "dependencies": {
    / /...
    "@types/react": "17.0.0"."@types/react-dom": "17.0.0"."react": "^ 17.0.1"."react-dom": "^ 17.0.1"."react-scripts": "4.0.1"."typescript": "4.1.2",},/ /...
}
Copy the code

After the package.json file is modified, run the yarn install command to install the dependency of the new version.

.eslintrc.json

If your app is also configured with ESLint, disable or remove the following rules as officially indicated

/ /...
  "rules": {
    // ...
    "react/jsx-uses-react": "off"."react/react-in-jsx-scope": "off"
  }
/ /...
Copy the code

reference

React introduces the new JSX conversion

A simple reference to update act17