[React] 'React' refers to a UMD global, but the current file is a module. Consider adding an import instead.

문제 발생

다음과 같은 코드에서 <p> tag에서  lint error가 났다. 이유를 알아보자.

export const AlarmChatPeople = ({
  username,
}: {
  username: string;
}) => {
    return <p>{username}</p>;
};

 

JSX 구문이 변환되는 방식은 컴파일러 옵션 jsxFactory에 따라 다르지만, 기본 값은 React.createComponent이다.

<p> tag를  React.createComponent('p') 와같이 변환해 준다. 따라서 명시적인

import React from 'react';

가 없을 경우 해당 오류가 반환된다.

 

해결 방법

import React from 'react';을 추가하자.

 

import React from 'react';

export const AlarmChatPeople = ({
  username,
}: {
  username: string;
}) => {
    return <p>{username}</p>;
};