Problem with Next, Typescript and Eslint

Asked

Viewed 65 times

-1

I’m starting a project with Next, Typescript, Eslint and Prettier. After starting the project, adding Typescript, Eslint and Prettier started getting an error that I can’t find a solution to, I tried everything.

Error:

JSX not allowed in files with Extension '. tsx'eslintreact/jsx-filename-Extension

Follow the index.tsx:

import React from 'react';
import Head from 'next/head';

const Home: React.FC = () => {
  return (
    <div>
      <Head>
        <title>HomePage</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main>
        <h1>conteúdo</h1>
      </main>

    </div>
  );
}

export default Home;

Eslint.json:

{
    "env": {
        "browser": true,
        "es2021": true,
        "node": true,
        "jest": true
    },
    "extends": [
        "plugin:react/recommended",
        "airbnb",
        "plugin:@typescript-eslint/recommended",
        "prettier/@typescript-eslint",
        "prettier/airbnb",
        "prettier/react"
    ],
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true
        },
        "ecmaVersion": 12,
        "sourceType": "module"
    },
    "plugins": [
        "react",
        "@typescript-eslint",
        "prettier"
    ],
    "rules": {
        "prettier/prettier": "error",
        "space-before-function-paren": "off",
        "react/prop-types": "off"
    }
}

The eslintrc:

{
  "extends": [
    "next",
    "next/core-web-vitals"
  ]
}

The prettier.config.js:

module.exports = {
    semi: true,
    singleQuote: true,
    arrowParens: 'avoid',
    endOfLine: 'auto'
}

The package.json:

{
  "name": "project",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "next": "11.0.1",
    "react": "17.0.2",
    "react-dom": "17.0.2"
  },
  "devDependencies": {
    "@types/node": "^16.3.2",
    "@types/react": "^17.0.14",
    "@typescript-eslint/eslint-plugin": "^4.28.3",
    "@typescript-eslint/parser": "^4.28.3",
    "eslint": "^7.30.0",
    "eslint-config-airbnb": "^18.2.1",
    "eslint-config-next": "11.0.1",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-import": "^2.23.4",
    "eslint-plugin-jsx-a11y": "^6.4.1",
    "eslint-plugin-prettier": "^3.4.0",
    "eslint-plugin-react": "^7.24.0",
    "eslint-plugin-react-hooks": "^4.2.0",
    "prettier": "^2.3.2",
    "typescript": "^4.3.5"
  }
}
javascript typescript next eslint prettier

2 answers

1

1

According to this thread, I would suggest putting this on .eslintrc:

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

Browser other questions tagged javascript typescript next eslint prettier

You are not signed in. Login or sign up in order to post.