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

avatar

Borislav Hadzhiev

Last updated: Apr 4, 2022

banner

Photo from Unsplash

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

To solve the error "Cannot use jsx unless the '--jsx' flag is provided", restart your IDE and development server and make sure your IDE is using the same version of TypeScript that your project uses. The project's TypeScript version and your IDE's TypeScript versions should match.

First, try restarting your IDE and development server. This solves the issue sometimes.

If the error is not resolved, make sure your IDE uses the workspace TypeScript version.

Open your terminal in your project's root directory (where your package.json file is) and make sure you have TypeScript installed.

shell
# 👇️ with npm npm install --save-dev typescript # ------------------------------ # 👇️ with yarn yarn 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...".

typescript-version.webp

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

use workspace version

Now try restarting your IDE and development server.

If the error is not resolved, make sure the include array in your tsconfig.json file is set to ["src/**/*"] (assuming your source files are in an src directory).

This is how my tsconfig.json file looks like for a simple create-react-app initialized project.

tsconfig.json
{ "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/**/*"] }

When the jsx option is set to react-jsx, it causes the compiler to emit .js files with the JSX changed to _jsx calls.

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

The example above uses the include option to specify 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, which contains your tsconfig.json file.

If the error is not resolved, try to delete your node_modules and package-lock.json (not package.json) files, re-run npm install and restart your IDE.

shell
# 👇️ delete node_modules and package-lock.json rm -rf node_modules rm -f package-lock.json # 👇️ clean npm cache npm cache clean --force npm install

Make sure to restart your IDE and dev server if the error persists. VSCode often glitches and a reboot solves things sometimes.

You can also try to update your react versions, if the previous suggestion didn't help.

shell
# 👇️ with NPM npm install react@latest react-dom@latest npm install --save-dev @types/react@latest @types/react-dom@latest # ---------------------------------------------- # 👇️ with YARN yarn add react@latest react-dom@latest yarn add @types/react@latest @types/react-dom@latest --dev

Conclusion #

To solve the error "Cannot use jsx unless the '--jsx' flag is provided", restart your IDE and development server and make sure your IDE is using the same version of TypeScript that your project uses. The project's TypeScript version and your IDE's TypeScript versions should match.

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.