React is not defined 에러 해결

참고: https://velog.io/@sooyun9600/React-is-not-defined-%EC%97%90%EB%9F%AC-%ED%95%B4%EA%B2%B0

기존의 문서를 리엑트 형식으로 일일히 변환하는 과정에서 React is not defined라는 에러를 만났다.

react 변환해주는 과정에서의 문제는 bable-loader에서 문제가 있다는 것을 의미한다는 것을 알게 되었다.

아래의 코드를 다음과 같이 변형하였더니 문제는 해결되었다.

//문제의 코드
{
   test: /\.m?js$/,
   exclude: /(node_modules|bower_components)/,
   use : {
     loader: 'babel-loader',
     options:{
       presets: [
         "@babel/preset-env", "@babel/preset-react"
       ]
     }          
   }
 },

 

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

해결은 했지만 해당 코드가 무슨 역할을 수행하는지 공식문서 참고해봄

classic | automatic, defaults to classic

Decides which runtime to use.
automatic auto imports the functions that JSX transpiles to. classic does not automatic import anything

classic과 automatic이 있는데 classic이 디폴트값
automatic으로 해줘야지 JSX를 트랜스파일해주는 함수를 자동으로 import해주는거 같더라.(추측)