JSX not allowed in files with extension '.tsx'eslint(react/jsx-filename-extension)


Typescript Problem Overview

In .tsx file, why does eslint report:

>JSX not allowed in files with extension '.tsx'eslint(react/jsx-filename-extension)

How can I update the eslint config can resolve this message:

enter image description here

Typescript Solutions

Solution 1 - Typescript

You probably want to configure the react/jsx-filename-extension rule in your .eslintrc.js so that ESLint is happy about JSX inside your TypeScript files:

rules:  {
  'react/jsx-filename-extension': [2, { 'extensions': ['.js', '.jsx', '.ts', '.tsx'] }],

Solution 2 - Typescript

Add this rule under the rules section of your eslint configuration:

"rules": {
  "react/jsx-filename-extension": [1, { "extensions": [".tsx", ".ts"] }]


All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionBaochang LiView Question on Stackoverflow
Solution 1 - TypescriptdmudroView Answer on Stackoverflow
Solution 2 - TypescriptRaymond WachagaView Answer on Stackoverflow