[리액트 네이티브/React Native] TypeScript 템플릿 사용시 에러

 

Error 

error An unexpected error occurred: "https://registry.yarnpkg.com/react-native-template-template-typescript: Not found”.

error This module isn't specified in a package.json file.

 

 

react-native cli를 이용해서 프로젝트를 생성할 때 typescript template를 사용할 수 있다. 

 

 

 

 

PC에 react-native cli를 이미 설치했기 때문에 아래와 같이 project를 세팅하려고 했다. 

 

react-native init AwesomeTSProject --template react-native-template-typescript

 

 

하지만 아래와 같은 에러가 뿜뿜...

 

info Setting up new React Native app in /Users/cckn/ws/AwesomeTSProject2

info Fetching template react-native-template-template-typescript...

yarn add v1.21.1

[1/4] 🔍  Resolving packages...

warning jest > jest-cli > jest-config > jest-environment-jsdom > jsdom > left-pad@1.3.0: use String.prototype.padStart()

error An unexpected error occurred: "https://registry.yarnpkg.com/react-native-template-template-typescript: Not found".

info If you think this is a bug, please open a bug report with the information provided in "/Users/cckn/ws/AwesomeTSProject2/yarn-error.log".

info Visit https://yarnpkg.com/en/docs/cli/add for documentation about this command.

yarn remove v1.21.1

[1/2] 🗑  Removing module react-native-template-template-typescript...

error This module isn't specified in a package.json file.

info Visit https://yarnpkg.com/en/docs/cli/remove for documentation about this command.

warn Failed to clean up template temp files in node_modules/react-native-template-template-typescript. This is not a critical error, you can work on your app.

(node:10378) UnhandledPromiseRejectionWarning: Error: Command failed: yarn add react-native-template-template-typescript

    at makeError (/Users/cckn/ws/AwesomeTSProject2/node_modules/execa/index.js:174:9)

    at Promise.all.then.arr (/Users/cckn/ws/AwesomeTSProject2/node_modules/execa/index.js:278:16)

    at process._tickCallback (internal/process/next_tick.js:68:7)

(node:10378) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 3)

(node:10378) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

 

해당 템플릿을 찾을 수 없다고 하는데.. 

 

생성된 폴더를 확인하면 타입스크립트가 아닌 기본 react-native 프로젝트가 생성되어 있다. 

 

npx react-native init AwesomeTSProject --template react-native-template-typescript

 

npx를 이용하면 뭔가 다른가 해서 npx를 이용해 프로젝트 세팅을 해봐도 결과는 마찬가지 

 

 

 

---

해결책 

 

https://github.com/react-native-community/react-native-template-typescript에서 매뉴얼을 확인했다.

 

 

레거시 react-native-cli에서는 해당 템플릿을 사용할 수 없고 새로운 CLI에서만 사용할 수 있다고 한다. 

 

기존의 cli를 제거하고 npx를 이용하거나 npx를 이용하고 싶지 않다면 새로운 cli를 전역으로 설치해야 한다. 

 

# uninstall legacy cli 

npm uninstall -g react-native-cli

 

# install new cli 

npm i -g @react-native-community/cli

 # or 

yarn global add @react-native-community/cli

 

 

# init typescript project

npx react-native init MyApp --template react-native-template-typescript

 

Done!

 

참조

• https://facebook.github.io/react-native/docs/getting-started
• https://github.com/react-native-community/react-native-template-typescript