javascript - Hvorfor får jeg stadig «JSX er ikke definert no-undef»

Mens jeg la til en karusell på hjemmesiden min, støtte jeg på et problem. Jeg får feilmelding:

'JSX' er ikke definert.

Jeg har vært inne på Stack Overflow og GitHub, så vel som Google, de gir alle et relativt nært svar til hverandre, men jeg er usikker på hva jeg kan gjøre galt.

Min carousel.tsx-fil er som følger

import * as React from "react";
import styled from "styled-components";

const SCarouselWrapper = styled.div`
  display: flex;
`;

interface IProps {
  children: JSX.Element[];
}

const Carousel = ({ children }: IProps) => {
  const activeSlide = children.map(slide => (
    <>
      {slide}
    </>
  ));

  return (
    <div>
      <SCarouselWrapper>
        {activeSlide}
      </SCarouselWrapper>
    </div>
  );
};

export default Carousel;

Mine lysbilder er strukturert på samme måte:

import * as React from "react";
import styled from "styled-components";

const SContainer = styled.div`
  align-items: center;
  display: flex;
`;

const SlideOne = () => (
  <SContainer>
    <img src="../../../../../content/images/logo.jpg" />
  </SContainer>
);

export default SlideOne;

når det gjelder min .eslintrc.json:

{
  "overrides": [
    {
      "files": ["*.ts"],
      "rules": {
        "no-undef": "off"
      }
    }
  ],
  "parser": "@typescript-eslint/parser",
  "plugins": ["@typescript-eslint"],
  "extends": [
    "plugin:react/recommended",
    "eslint:recommended",
    "plugin:@typescript-eslint/eslint-recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:@typescript-eslint/recommended-requiring-type-checking",
    "prettier",
    "eslint-config-prettier"
  ],
  "parserOptions": {
    "ecmaVersion": 2018,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    },
    "project": "./tsconfig.e2e.json"
  },
  "settings": {
    "react": {
      "version": "detect"
    }
  },
  "rules": {
    "@typescript-eslint/member-ordering": [
      "error",
      {
        "default": ["static-field", "instance-field", "constructor", "static-method", "instance-method"]
      }
    ],
    "@typescript-eslint/no-parameter-properties": ["warn", { "allows": ["public", "private", "protected"] }],
    "@typescript-eslint/no-unused-vars": "off",
    "@typescript-eslint/explicit-member-accessibility": "off",
    "@typescript-eslint/explicit-function-return-type": "off",
    "@typescript-eslint/no-explicit-any": "off",
    "@typescript-eslint/no-unsafe-argument": "off",
    "@typescript-eslint/no-unsafe-return": "off",
    "@typescript-eslint/no-unsafe-member-access": "off",
    "@typescript-eslint/no-unsafe-call": "off",
    "@typescript-eslint/no-unsafe-assignment": "off",
    "@typescript-eslint/explicit-module-boundary-types": "off",
    "@typescript-eslint/restrict-template-expressions": "off",
    "@typescript-eslint/restrict-plus-operands": "off",
    "@typescript-eslint/no-floating-promises": "off",
    "@typescript-eslint/ban-types": [
      "error",
      {
        "types": {
          "Object": "Use {} instead."
        }
      }
    ],
    "@typescript-eslint/interface-name-prefix": "off",
    "@typescript-eslint/no-empty-function": "off",
    "@typescript-eslint/unbound-method": "off",
    "@typescript-eslint/array-type": "off",
    "@typescript-eslint/no-shadow": "error",
    "spaced-comment": ["warn", "always"],
    "guard-for-in": "error",
    "no-labels": "error",
    "no-caller": "error",
    "no-bitwise": "error",
    "no-console": ["error", { "allow": ["warn", "error"] }],
    "no-new-wrappers": "error",
    "no-eval": "error",
    "no-new": "error",
    "no-var": "error",
    "radix": "error",
    "eqeqeq": ["error", "always", { "null": "ignore" }],
    "prefer-const": "error",
    "object-shorthand": ["error", "always", { "avoidExplicitReturnArrows": true }],
    "default-case": "error",
    "complexity": ["error", 40],
    "no-invalid-this": "off",
    "react/prop-types": "off",
    "react/display-name": "off",
    "jsx": true
  }
}

Jeg har prøvd det som ble oppført på: Stack Overflow-svar, og jeg har prøvd dette også: Offisielt svar

Svar #1

Så, svaret som fungerte for meg, var å endre min .eslintrc.json

{ 
  ... 
  "globals": {
     "JSX": "readonly"
  }
}

I ESLint-dokumentasjonen:

Noen av ESLints kjerne-regler er avhengige av kunnskap om de globale variablene som er tilgjengelige for koden din under kjøring. Siden disse kan variere sterkt mellom forskjellige miljøer og også kan endres under kjøring, gjør ESLint ingen antakelser om hvilke globale variabler som finnes i kjøre-miljøet ditt.

For prosjektet mitt, når denne globale er definert, vil den som standard bruke JSX-navnerommet i node_modules/@types/react

Svar #2

I din Carousel.tsx oppdater grensesnittet ditt med noe slikt:

interface IProps {
  children: React.ReactNode
}

Relaterte artikler