React, Babel, 그리고 Webpack 문제 해결하기

React, Babel, Webpack이 JSX 코드를 파싱하지 못하는 문제

React, Babel 및 Webpack이 JSX 코드를 파싱하지 못하는 문제를 겪고 있다면, 혼자가 아닙니다. 종종 “Unexpected token” 또는 “Module build failed”와 같은 오류 메시지와 함께 발생하는 이 문제는 디버깅하기 어려울 수 있습니다. 다행히도 이 문제를 해결하기 위해 시도할 수 있는 여러 가지 해결책이 있습니다.

1. babel-loader에 프리셋 추가하기

JSX 파싱 오류의 일반적인 원인은 babel-loader 구성에서 프리셋이 빠진 것입니다. 이를 해결하기 위해 webpack.config.js 파일을 수정하세요:

{
  test: /\.jsx?$/,
  exclude: /node_modules/,
  loader: "babel-loader",
  presets: ['es2015', 'react']
}

‘es2015’와 ‘react’ 프리셋을 추가함으로써 babel-loader가 JSX 구문을 올바르게 처리할 수 있도록 할 수 있습니다.

2. React-DOM을 사용하여 렌더링하기

React 버전 0.14 이상을 사용하는 경우, 코드를 렌더링할 때 React 대신 React-DOM을 사용하는지 확인하세요.

import React from "react";
import ReactDOM from "react-dom";
import Greeting from "./greeting";

ReactDOM.render(
  <Greeting name="World"/>,
  document.body
);

코드를 ReactDOM을 사용하도록 업데이트하면 JSX 파싱 오류를 해결하는 데 도움이 될 수 있습니다.

3. babel-preset-react 추가하기

위의 해결책들이 작동하지 않는다면, babel-preset-react 모듈을 설치하고 프로젝트에서 구성해 보세요:

npm install babel-preset-react

프로젝트 디렉토리에 .babelrc 파일을 생성하고 다음 내용을 추가하세요:

{
  "presets": ['react']
}

이 접근 방식은 여러 개의 로더나 babel-loader와 함께 react-hot 로더를 사용하는 경우 일부 개발자에게 문제를 해결하는 데 도움이 되었다고 보고되었습니다.

4. webpack.config.js 쿼리에 프리셋 구성

다른 접근 방식은 webpack.config.js의 쿼리 블록에 프리셋을 구성하는 것입니다:

query: {
  presets: ['react', 'es2015']
}

5. .babelrc 파일 조정하기

일부 경우에는 다음과 같이 .babelrc 파일을 수정하는 것이 도움이 될 수 있습니다:

{
  "stage": 2,
  "env": {
    "development": {
      "plugins": [
        "react-display-name",
        "react-transform"
      ],
      "extra": {
        "react-transform": {
          "transforms": [{
            "transform": "react-transform-hmr",
            "imports": ["react"],
            "locals":  ["module"]
          }]
        }
      }
    }
  }
}

.babelrc에 위 구성을 추가하면 JSX 파싱 문제가 해결될 수 있습니다.

이러한 해결책 중 하나 이상을 따르면 React, Babel 및 Webpack이 JSX 코드를 파싱하지 못하는 문제를 대부분 해결할 수 있습니다. 제안된 방법을 실험해보고 특정 설정에 가장 잘 맞는 방법을 선택하세요. React로 코딩을 즐기세요!

참고 자료 : 

reactjs