JSX is not defined

생성일

Dec 5, 2021 06:12 AM

태그

ESLint

Env Settings

TypeScript

Issue

작성자

해결 완료

🔥 문제

타입스크립트에서 Dynamic Tag를 작성 중에 해당 오류가 발생하였다.

'JSX' is not defined. eslint(no-undef)

이에 대한 해결 방법이 없을까 고민하면서 해결 방법을 탐색하였다.

⭐ 해결 방법

결정적인 해결 방법을 다음 Stackoverflow의 답변에서 찾게 되었다.

처음에는 TS에서의 타입을 모듈에서 찾기로 하였으나... 생각해보니, JSX 자체가 이미 확장자로서 vsCode가 인식하지 않나 싶었다.

역시, JSX라는 모듈이 호출되지 않은 문제가 아니라, ESLint가 얘를 정확히 알아보지 못하는 오류였다.


globals: {
    React: true,
    google: true,
    mount: true,
    mountWithRouter: true,
    shallow: true,
    shallowWithRouter: true,
    context: true,
    expect: true,
    jsdom: true,
    JSX: true,
},

문제가 말끔히 해결됐다! ~~이제 다음 오류를 해결하러...~~

해결 방법 2

다음과 같이 keyof로 해당 키임을 명시하는 방법도 사용이 가능했다.


import styled from '@emotion/styled';
import React, { ReactNode } from 'react';

type LevelTypes = 1 | 2 | 3 | 4;

export interface HeaderTextProps {
  children: ReactNode;
  level: LevelTypes;
  [prop: string]: any;
}
const StyledHeaderTag: React.FC<HeaderTextProps> = styled.div`
  font-size: ${({ level }: { level: LevelTypes }) => {
    const fontSizes = {
      1: '24px',
      2: '18px',
      3: '14px',
      4: '11px',
    };
    return fontSizes[level];
  }};
  font-weight: 700;
`;

const HeaderText = ({ children, level = 1 }: HeaderTextProps) => {
  const HeaderTag = `h${level}` as keyof JSX.IntrinsicElements;
  return (
    <StyledHeaderTag as={HeaderTag} level={level} HeaderTag={HeaderTag}>
      {children}
    </StyledHeaderTag>
  );
};

export default HeaderText;

👏🏻 참고자료

https://stackoverflow.com/questions/64170868/why-eslint-consider-jsx-or-some-react-types-undefined-since-upgrade-typescript