解析错误：意外的保留字“接口”。 eslint

Question

I'm trying to use Props in my code and I'm getting the following error on (interface - "Parsing error: Unexpected reserved word 'interface'. (3:0)eslint").

I'm using next with TypeScript to develop this project.

error image

 import { TitleStyled, SubTitle } from "./Title.style"; interface TitleProps { titulo: String; subtitulo?: String | JSX.Element; } export default function Title(props: TitleProps) { return ( <> <TitleStyled>{props.titulo}</TitleStyled> <SubTitle>{props.subtitulo}</SubTitle> </> ); }

My package.json

 { "name": "pets", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }, "dependencies": { "@emotion/react": "^11.10.5", "@emotion/styled": "^11.10.5", "@mui/material": "^5.11.4", "@next/font": "13.1.1", "@types/node": "18.11.18", "@types/react": "18.0.26", "@types/react-dom": "18.0.10", "eslint": "8.31.0", "eslint-config-next": "13.1.1", "next": "13.1.1", "react": "18.2.0", "react-dom": "18.2.0", "typescript": "4.9.4" } }

My tsconfig.json

 { "compilerOptions": { "target": "es5", "lib": ["dom", "dom.iterable", "esnext"], "allowJs": true, "skipLibCheck": true, "strict": true, "forceConsistentCasingInFileNames": true, "noEmit": true, "esModuleInterop": true, "module": "esnext", "moduleResolution": "node", "resolveJsonModule": true, "isolatedModules": true, "jsx": "preserve", "incremental": true }, "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"], "exclude": ["node_modules"] }

Answer 1

Have you tried renaming your file Title.tsx instead of Title.jsx ?