While adding a carousel to my home page I ran into an issue. I get error:

'JSX' is not defined.

I have been looking on Stack Overflow, and GitHub as well as Google, they all give a relatively close answer to each other but I am unsure what I may be doing wrong.

My carousel.tsx file is as follows

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

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;

My slides are structured all the same:

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

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

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

export default SlideOne;

as for my .eslintrc.json:

{
  "overrides": [
    {
      "files": ["*.ts"],
      "rules": {
        "no-undef": "off"
      }
    }
  ],
  "parser": "@typescript-eslint/parser",
  "plugins": ["@typescript-eslint"],
  "extends": [
    "plugin:react/remended",
    "eslint:remended",
    "plugin:@typescript-eslint/eslint-remended",
    "plugin:@typescript-eslint/remended",
    "plugin:@typescript-eslint/remended-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-ment": ["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",
    "plexity": ["error", 40],
    "no-invalid-this": "off",
    "react/prop-types": "off",
    "react/display-name": "off",
    "jsx": true
  }
}

I have tried what was listed at: Stack Overflow answer and I have tried this as well: Official answer

While adding a carousel to my home page I ran into an issue. I get error:

'JSX' is not defined.

I have been looking on Stack Overflow, and GitHub as well as Google, they all give a relatively close answer to each other but I am unsure what I may be doing wrong.

My carousel.tsx file is as follows

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

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;

My slides are structured all the same:

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

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

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

export default SlideOne;

as for my .eslintrc.json:

{
  "overrides": [
    {
      "files": ["*.ts"],
      "rules": {
        "no-undef": "off"
      }
    }
  ],
  "parser": "@typescript-eslint/parser",
  "plugins": ["@typescript-eslint"],
  "extends": [
    "plugin:react/remended",
    "eslint:remended",
    "plugin:@typescript-eslint/eslint-remended",
    "plugin:@typescript-eslint/remended",
    "plugin:@typescript-eslint/remended-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-ment": ["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",
    "plexity": ["error", 40],
    "no-invalid-this": "off",
    "react/prop-types": "off",
    "react/display-name": "off",
    "jsx": true
  }
}

I have tried what was listed at: Stack Overflow answer and I have tried this as well: Official answer

• javascript
• reactjs
• typescript
• eslint
• jhipster

2 Answers 2

So, the answer that worked for me, was changing my .eslintrc.json

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

In the ESLint docs:

Some of ESLint's core rules rely on knowledge of the global variables available to your code at runtime. Since these can vary greatly between different environments as well as be modified at runtime, ESLint makes no assumptions about what global variables exist in your execution environment.

For my project, once this global is defined, it will default to the JSX namespace in node_modules/@types/react

In your Carousel.tsx update your interface with something like this:

interface IProps {
  children: React.ReactNode
}