[webpack] uncaught referenceerror: react is not defined

Problem

create-react-app 없이 리액트 + 타입스크립트 환경을 구축하는 과정에서 npm run dev 실행 후 에러가 발생했다.

터미널에서는 webpack 5.82.1 compiled successfully in 1429 ms 메시지가 뜨고 컴파일과 번들링에는 성공했지만 크롬 브라우저로 dev 서버 콘솔창에 아래와 같은 에러가 발생했다.

uncaught referenceerror: react is not defined

물론 빈 화면으로 컴포넌트에 넣어둔 텍스트 또한 보이지 않았다.

Solution

구글링해 본 결과 스택오버플로우에서 해결 방법을 찾을 수 있었다.

기존 .babelrc

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react",
    "@babel/preset-typescript"
  ]
}

수정 후 .babelrc

{
  "presets": [
    "@babel/preset-env",
    ["@babel/preset-react", { "runtime": "automatic" }],
    "@babel/preset-typescript"
  ]
}

@babel/preset-react에 {"runtime": "automatic"} 옵션을 추가하는 것이다.

runtime
classic or automatic 값을 가지고 기본값은 classic이다.
automatic은 JSX를 트랜스파일해주는 함수를 자동으로 import 해준다.
babel 공식 문서