expo custom plugin 좌충우돌 typescript 에러

 expo 프로젝트에서 android manifest 파일을 수정해야할 일이 있었다.

그래서 custom plugin 을 만들어보기로 했다.

plugin.ts를 만들어 app.json plugins에 넣으면 에러가 난다. typescript를 제대로 인식하지 못하는 것이다.

expo 기본 프로젝트에서 생성되는 tsconfig.json 파일은 expo/tsconfig.base 이 파일을 상속하는데,

"compilerOptions" 에 "module": "preserve"라고 되어 있다.

이것때문에 루트에 존재하는 app.json에서 해당 ts 파일을 불러올수가 없다.

이것을 "commonjs"로 변경하면 잘 되긴 하는데, 영 찝찝하다.

그래서 prebuild만을 위한 tsconfig.plugin.json 파일을 따로 생성해주고

app.config.ts를 생성해주고 그 상단에서 해당 파일은 tsconfig.plugin.json을 사용하도록 처리해주면 된다.

tsconfig.plugin.json

{

"extends": "./tsconfig.json",

"compilerOptions": {

"module": "commonjs",

"moduleResolution": "node",

"allowJs": true,

"customConditions": null

},

"include": ["app.config.ts", "plugins/**/*.ts"]

}

app.config.ts

import { register } from "ts-node";

register({ project: "./tsconfig.plugin.json" });

import { ExpoConfig } from "expo/config";

export default ({ config }: { config: ExpoConfig }) => {

config.plugins?.push("./path/to/plugin/ts");

return config;

};

이렇게 해주면 해결된다.

** 문제점 발견

이렇게 설정을 해주면 expo install을 할때 문제가 발생한다. 아마 expo install을 하는 과정에서 app.json을 건드리게 되는데 이게 app.config.ts까지 타게 되는데 라이브러리를 설치할때는 commonjs가 아니라 기존의 preserve 로 동작해야하나보다. 

그때는 귀찮지만, app.config.ts의 파일이름을 잠깐 다른걸로 변경해두면 된다.

좀더 엘레강스한 해결법은 못찾았다.