목표

nativeWind를 오류 없이 정상적으로 사용하려 했습니다.

문제

예제로 보았던 nativeWind 의 버전이 너무 낮아서 (2.0.11) 업데이트를 했더니 .plugins is not a valid plugin property 이라는 오류가 발생하며 잘 되던 코드가 실행되지 않았습니다.

해결 과정

1: 오류를 검색해보니 전부 버전을 낮추세요, 예제에 있던 2.0.11버전을 쓰라고 되어있었기에 버전을 다시 낮추었고, 같이 업데이트했던 expo를 포함한 다른 라이브러리들도 다 버전을 낮추었습니다.

2: 그렇게 문제를 넘기고 코딩을 하던 도중 scrollView 를 사용할때 문제가 발생했습니다. CSS 스타일을 적용할 때, nativeWind식 스타일 코드가 오류가 발생하며 정상 동작하지 않았습니다.

일단 react Native 에 있던 CSS코드를 적용시키는 예제를 통해 css를 적용시킬 수 있었지만 nativeWind 를 적용시키는 문제는 해결하기 힘들었습니다. contentContainerStyle에는 nativeWind 스타일의 코드는 입력되지 않았기에 scrollView 만 CSS 코드를 계속 유지해야 되는 상황이 벌어졌습니다.

3: 이 문제를 다른 작업과 병행하면서 계속 여러가지를 시도해 보았으나 소용이 없었고, contentContainerClassName는 버전 3 부터 지원한다는 정보만 얻을 수 있었습니다.

4: 일단 버전 3부터 지원된다는것은 버전업을 할 방법이 있다는 이야기라고 생각했고, 정면돌파를 통해 문제를 해결해야겠다고 판단했습니다, 그러나 다운그레이드 과정에서 어디가 어떻게 꼬여있을지 몰랐기 때문에 전체적인 재설치를 하기로 했고, 재설치를 위해 정보를 수집하면서 문제의 원인과 해결방법을 찾을 수 있었습니다.

원인

nativeWind의 버전마다 babel의 세팅값으로 작성해야되는 코드가 달라서 생긴 문제였습니다.

2.0은 babel의 plugins에, 3.0부터는 presets에 nativeWind를 등록해야됐는데 버전업을 할 때 단순히 npm update명령어로 버전만 업그레이드 했기에 오류가 발생했던것이었습니다.

해결방법

presets에 nativeWind를 등록하고 update를 해서 성공적으로 버전업을 할 수 있었습니다.

후기

성공했던 프로젝트의 코드라고 올바른 답이 아닐수도 있다는 교훈을 얻었습니다.