일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
31 |
- web server vs was
- Event Loop
- react
- Call stack
- body-parser
- parcel
- first class citizen
- client side rendering
- DOM API
- centos7 설치
- 일급 객체
- 자료구조 정렬
- javascript first class citizen
- typescript parcel tilde
- javascript module
- redux 사용 이유
- express request body
- 순차리스트
- redux 특징
- request body undefined
- server side rendering
- es6 module
- Browser API
- parcel resolver error
- react event bind
- 자료구조
- 자료구조 queue
- task queue
- javascript eventloop
- 선형리스트
- Today
- Total
비실이의 개발 성장기
Typescript Parcel Tilde(~)경로 적용 시, Resolver Error 해결 (삽질기) 본문
오랜만에 삽질기를 올린다.
아직 Typescript 기반으로 React 개발을 해본 적도 없고..
Parcel 번들러도 경험해보고 싶어서 요즘 끄적끄적하고 있다.
오늘 상대 경로를 절대 경로로 변경하기 위해 Parcel 공식문서를
찾아보다 Tilde (~)를 사용한 절대 경로 적용에 대해 알게 되었다.
Parcel 공식 Docs Tilde path 바로가기
Typescript를 사용 중이라면 추가 설정이 있는 것도 확인할 수 있다.
Parcel 공식 Docs Typescript tilde 설정 바로가기
tsconfig 설정과 Tilde 경로 수정을 마치고 Parcel을 실행하니
에러가 발생하며 빌드가 되지 않았다.
빨간색 에러를 보니 경로에 문제가 있음을 알 수 있었다.
Parcel 빌드 전에 linter 스크립트가 실행되는데
linter에서는 별다른 문제가 나오지 않았으니 Typescript 설정은 이상 없다 생각했다.
package.json 에 alias 설정
parcel .cache 삭제
node_modules 삭제 후 재설치 등...
여러 가지 방법을 시도했으나 빌드는 되지 않았다.
입에서 슬슬 험한 단어들이 나오려던 찰나,
Parcel github 이슈 댓글에서 해결방법을 찾을 수 있었다.
babel-plugin-module-resolver 사용하여 babel 트랜스파일링 시,
Tilde 경로를 치환하는 설정을 추가하면 된다고 한다.
.babelrc에 추가한 설정은 다음과 같다.
다시 Parcel 실행을 하니 빌드와 페이지 로드 모두 정상적으로
동작하는 것을 확인할 수 있었다.
그런데 Tilde는 parcel에서 제공하는 것이니 babel 이 아닌
parcel 에서 처리하는 게 맞을 거 같다는 생각이 든다.
혹시 또 다른 해결방법을 알고 계신 분이 있으시면
댓글 부탁드립니다. :)
'트러블슈팅' 카테고리의 다른 글
[express] express request.body undefined 문제 해결 (1203) | 2018.03.30 |
---|---|
SourceTree remote push 시 "Authentication failed for" 발생 조치법 (1100) | 2018.03.22 |
CentOS 7 설치 삽질기 (feat. boot usb) (1144) | 2017.03.02 |