[RN][트러블슈팅] @react-navigation/xxx/xxx.tsx: Unexpected token

❗️문제

babel-preset 패키지와 @babel/core가 old version이기 때문에 생기는 문제

 

 

 

💡해결

babel-preset-expo

Expo 환경이므로 babel-preset-expo를 업데이트

 

 

babel-preset-expo란?

Expo 애플리케이션을 위한 Babel 프리셋으로, 필요한 Babel 플러그인과 설정을 포함.

최신 JavaScript 문법, React JSX 변환, 클래스 프로퍼티 등을 지원하며, React Native, React, Expo와 관련된 다양한 기능을 지원

 

// npm
npm i babel-preset-expo

// yarn
yarn add babel-preset-expo

 

// babel.config.js
module.exports = function (api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: [
     ...
    ],
  };
};

 

 

 

@babel/core

@babel/core를 최신 버전으로 업데이트

 

@babel/core란?

 Babel의 핵심 패키지로, JavaScript 코드를 변환하는 데 필요한 모든 도구를 포함.

 

 

// npm
npm install --save-dev @babel/core

// yarn
yarn add --dev @babel/core

 

 

node_modules 삭제 및  종속성 재설치

// npm
rm -rf node_modules
rm package-lock.json
npm install

// yarn
rm -rf node_modules
rm yarn.lock
yarn

 

 

 

Metro Bundler cache 삭제

// expo
expo start -c

 

 

 

 

참고

https://reactnavigation.org/docs/troubleshooting/#im-getting-syntaxerror-in-react-navigationxxxxxxtsx-or-syntaxerror-xxxreact-navigationxxxxxxtsx-unexpected-token

https://github.com/react-navigation/react-navigation/issues/10209