parcel + antd, antd-mobile 사용할 때 문제 해결(rmc-steps 디펜던시 오류, .babelrc 작성)


(Bauwow) #1

안녕하세요! :slight_smile:
parcel + ant-design-mobile 사용하는데 발생한 문제 해결 방법 올려봅니다.

기존에 ant-design은 적용된 상태였고, ant-design-mobile을 새로 추가했는데
Cannot resolve dependency 'rmc-steps' 에러가 발생했어요.

해결은 rm -rf node_modules yarn.lock로 기존에 설치된 모듈 삭제하고,
(yarn.lock 파일은 삭제하지 않으면 낮춘 버전 적용이 안 되서 같이 삭제했어요.)
package.json 파일에서 "antd-mobile": "^2.2.4"로 설치된 버전을
"antd-mobile": "2.2.0" 로 낮춘 뒤 yarn 으로 모듈을 다시 설치하니 해결 되었습니다.

참고 글


덧)
ant-design, ant-design-mobile 같이 사용할 때
.babelrc 파일을 babel-plugin-import 예시대로 작성하면 UI가 깨지더라고요.

// .babelrc
"plugins": [
  ["import", { "libraryName": "antd", "libraryDirectory": "lib"}, "ant"],
  ["import", { "libraryName": "ant-mobile", "libraryDirectory": "lib"}, "ant-mobile"]
]

각각 ant-design, ant-design-mobile 문서 참고해서 아래같이 수정하면 제대로 적용 됩니다 :slight_smile:

{
  "plugins": [
    ["import", { "libraryName": "antd","libraryDirectory": "es","style": "css" }, "antd" ],
    ["import", { "libraryName": "antd-mobile","style": "css" }, "antd-mobile" ]
  ]
}