Cannot use jsx unless the '--jsx' flag is provided (React)

The error “Cannot use jsx unless the ‘–jsx’ flag is provided” can occur when using React and TypeScript. There are a few different steps you can take to troubleshoot and resolve this error.

Step 1: Restart your IDE and development server

The first thing to try is simply restarting your Integrated Development Environment (IDE) and development server. This can often resolve the issue.

Step 2: Make sure your IDE is using the same version of TypeScript as your project

If restarting your IDE and development server doesn’t solve the issue, the next step is to make sure your IDE is using the same version of TypeScript as your project.

[Fixed]: No inputs were found in config file in TypeScript

To do this, open your terminal in the root directory of your project (where your package.json file is located) and ensure that you have TypeScript installed:

# with npmnpm install --save-dev typescript# with yarnyarn add typescript --dev

In VSCode, you can press CTRL + Shift + P (or ⌘ + Shift + P on Mac) to open the command palette. Type “typescript version” in the input field and select “TypeScript: Select TypeScript Version…”.

Then click “Use workspace version”. This should be your locally installed TypeScript version.

Now try restarting your IDE and development server.

Step 3: Check the include array in your tsconfig.json file

If the error persists, check the include array in your tsconfig.json file to make sure it is set to [“src/*/“] (assuming your source files are in a src directory).

This is an example of what your tsconfig.json file should look like for a simple create-react-app initialized project:

{  "compilerOptions": {    "target": "es6",    "lib": ["dom", "dom.iterable", "esnext"],    "allowJs": true,    "skipLibCheck": true,    "esModuleInterop": true,    "allowSyntheticDefaultImports": true,    "strict": true,    "forceConsistentCasingInFileNames": true,    "noFallthroughCasesInSwitch": true,    "module": "esnext",    "moduleResolution": "node",    "resolveJsonModule": true,    "isolatedModules": true,    "noEmit": true,    "jsx": "react-jsx"  },  "include": ["src/**/*"]}

The include option specifies a pattern to include in the codebase. The pattern matches all files located in the src directory. The filenames or specified pattern is resolved relative to the directory containing your tsconfig.json file.

Make sure to restart your development server and your IDE if necessary. Your development server won’t pick up the changes until you stop it and re-run the npm start command.

Step 4: Delete node_modules and package-lock.json and run npm install

If the previous steps haven’t resolved the error, try deleting your node_modules and package-lock.json files, running npm install, and restarting your IDE.

# delete node_modules and package-lock.jsonrm -rf node_modulesrm -f package-lock.json# clean npm cachenpm cache clean --forcenpm install

Make sure to restart your IDE and development server if the error persists.

Step 5: Update your React versions

If none of the previous steps have helped, you can try updating your React versions.

# with NPMnpm install react@latest react-dom@latestnpm install --save-dev @types/react@latest @types/react-dom@latest# with YARNyarn add react@latest react-dom@latestyarn add @types/react@latest @types/react-dom@latest --dev

Conclusion on Cannot use jsx unless the ‘–jsx’ flag is provided

To solve the “Cannot use jsx unless the ‘–jsx’ flag is provided” error in React, try restarting your IDE and development server, making sure your IDE is using the same version of TypeScript as your project, checking the include array in your tsconfig.json file, deleting node_modules and package-lock.json and running npm install, and updating your React versions. If the error persists, try restarting your IDE or rebooting your computer.