- Published on
- ·4 min read
React Native - TS7016 ：Could not find a declaration file for module 'styled-components/native'
이 글은 이전 블로그에서 작성한 내용을 옮겨오면서 내용을 추가/수정한 글입니다.
오류 메시지
React Native(TypeScript) 개발 중 import styled from 'styled-components/native'; 구문에서 아래와 같은 오류 메시지가 표시됩니다. (IntelliJ 사용)
TS7016: Could not find a declaration file for module 'styled-components/native'. '..../node_modules/styled-components/native/dist/styled-components.native.cjs.js' implicitly has an 'any' type.
설치 상태 확인
검색하니 @types/styled-components-react-native 모듈을 설치하라고 하는데 저는 이미 관련 모듈들을 다 설치한 상태였습니다.
참고로 styled-components 관련 설치한 내용은 아래와 같았습니다.
npm install styled-components
npm install --save-dev @types/styled-components @types/styled-components-react-native
설정된 package.json은 아래와 같았습니다.
{
"name": "com.example.sample",
"version": "0.0.1",
"private": true,
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"lint": "eslint .",
"start": "react-native start",
"test": "jest"
},
"dependencies": {
"@react-navigation/native": "^6.1.6",
"@react-navigation/native-stack": "^6.9.12",
"react": "18.2.0",
"react-native": "0.71.8",
"react-native-safe-area-context": "^4.5.3",
"react-native-screens": "^3.20.0",
"styled-components": "^5.3.10"
},
"devDependencies": {
"@babel/core": "^7.20.0",
"@babel/preset-env": "^7.20.0",
"@babel/runtime": "^7.20.0",
"@react-native-community/eslint-config": "^3.2.0",
"@tsconfig/react-native": "^2.0.3",
"@types/jest": "^29.5.1",
"@types/react": "^18.2.6",
"@types/react-test-renderer": "^18.0.0",
"@types/styled-components": "^5.1.26",
"@types/styled-components-react-native": "^5.2.1",
"babel-jest": "^29.2.1",
"eslint": "^8.19.0",
"jest": "^29.2.1",
"metro-react-native-babel-preset": "0.73.9",
"prettier": "^2.4.1",
"react-test-renderer": "18.2.0",
"typescript": "^4.9.5"
},
"jest": {
"preset": "react-native"
}
}
설치는 되어있는데, 인식은 못하는 현상입니다.
IDE를 껐다 켜도 동일하고, node_modules 폴더를 제거하고 npm install을 다시 해도 동일합니다.
해결 방법
tsconfig.json 파일에 compilerOptions을 추가해 주고 해결했습니다.
(설치 시에 자동으로 저 내용이 들어가야 하는데, 안 들어가진 것인지 원래 수동으로 설정해줘야 하는 것인지 원인은 모르겠습니다.)
{
"extends": "@tsconfig/react-native/tsconfig.json",
"compilerOptions": {
"types": ["react-native", "jest", "styled-components-react-native"]
}
}
기존코드에는 extends만 있었습니다.
compilerOptions을 위와 같이 추가해주고 나니, 에러 표시가 사라졌습니다.
참고로 위 extends가 가리키는 @tsconfig/react-native/tsconfig.json 파일을 확인해 보면 아래와 같이 types에 styled-components-react-native가 빠져있는 것을 볼 수 있습니다.
{
"$schema": "https://json.schemastore.org/tsconfig",
"display": "React Native",
"_version": "2.0.3",
"compilerOptions": {
"types": ["react-native", "jest"],
... 생략 ...
}
... 생략 ...
}
마무리
설정 오류는 원인이 워낙 다양하여 정답은 아닐 수 있습니다.
저는 이것으로 해결이 되었기에 혹시나 도움이 될까 하여 남겨봅니다.
