DevOps CI 단계 Import Component NotFound 에러

2022-02-11

2024-06-10

azure, devops

[DevOps] SPA 빌드 시 import 컴포넌트 not found 에러

에러:

자동화 파이프라인을 통해 빌드 CI 스크립트 npm 빌드 시 ##[error]Bash exited with code ‘1’. 에러가 발생함.

azure-pipelines.yml

trigger:
- master

pool:
  vmImage: ubuntu-latest

steps:
- task: NodeTool@
  inputs:
    versionSpec: '16.x'
  displayName: 'Install Node.js'

- script: |
    npm install
    npm run build
  displayName: 'npm install and build'

- task: ArchiveFiles@
  displayName: 'Archive dist Directory'
  inputs:
    rootFolderOrFile: dist
    includeRootFolder: false
    archiveType: 'zip'
    archiveFile: '$(Build.ArtifactStagingDirectory)/$(Build.BuildId).zip'
    replaceExistingArchive: true
    verbose: true

- task: PublishBuildArtifacts@
  displayName: 'Publish Artifacts'
  inputs:
    PathtoPublish: '$(Build.ArtifactStagingDirectory)'
    ArtifactName: 'drop'
    publishLocation: 'Container'

에러 로그를 살펴보면 아래와 같은데

...

These dependencies were not found:

* @/components/MenuList/Link.component.vue in ./node_modules/cache-loader/dist/cjs.js??ref--13-0!....
* @/components/MenuList/Unlink.component.vue in ./node_modules/cache-loader/dist/cjs.js??ref--13-0!...

...

대략 요점은 스크립트 import 구문에서 의존성 컴포넌트 path를 제대로 인식못해서 발생하는 것 같은데… 로컬에서 빌드해보면 이상없이 잘 되는데 희한하게 DevOps 파이프라인에서만 빌드 시 계속 에러가 발생했다.

그래서 원인을 알아내려 대략 아래와 같이 수정해서 테스트 확인해 보았다.. 원인 모를 node_modules 캐시 에러를 대응하느라 검색 하면서도 이것저것 테스트 해봤는데 대략 머리에 기억에 남는게 아래 정도 있었던거 같다..

alias 부분을 직접적인 상대경로도 변경
파일명 대소문자 변경
vue.config 파일 설정 변경
동적 컴포넌트 부분을 수동으로 변경
파이프라인 스크립트 node 캐시 삭제 추가
파이프라인 스크립트 npm 버전 업데이트 추가
파이프라인 스크립트 cli 관련 패키지 글로벌 설치
기타…

해결:

[components] > [MenuList] 디렉토리 삭제 후 배포 (빌드 성공)

@/components/Link.component.vue
@/components/Unlink.component.vue

다시 원래의 [MenuList] 디렉토리 생성 후 배포 (빌드 성공)

@/components/MenuList/Link.component.vue
@/components/MenuList/Unlink.component.vue

처음 MenuList 디렉토리를 지우고 파이프라인을 돌려보니 정상적으로 빌드 되었다.

그래서 다시 원래 MenuList 디렉토리를 만들어 다시 파이프라인를 돌려봤는데 정상적으로 빌드 되었다.;;

원인은 잊고 있었는데 아마 이전에 menuList → MenuList 로 디렉토리를 변경했던 부분이 아마도 Git이 대소문자를 구분하지 못해서 저장소에 변경된 폴더 내 캐싱된 파일이 남아 있었고 이번에 DevOps 파이프라인 연동해보면서..
윈도우 계열은 대소문자를 구분 못하니 이슈가 없었을꺼 같은데 리눅스 계열 (우분투도 마찮가지일테고..) 은 대소문자를 구분하기에 Git 캐싱이 node_modules 캐시 로더 관련 부분과 맞물려서 해당 에러를 발생시켯던 것 같다.
Git 대소문자 구분 설정을 추가하던가 캐시를 지우고 커밋하면 아마 디렉토리를 굳이 지우고 다시 추가하지 않아도 해결 될 것이다.

결국 애초부터 코드단이나 설정부분에 아무런 이상 없는 에러였던 것… (이런게 원인 찾고 해결하기 정말 애매하고 힘들다…)

정말 허망하고 어이가 없긴하지만… 같이 협업하는 사람이 있었으면 같은 에러가 발생해서 Git 캐싱 이슈를 금방 알수 있었을텐데.. 혼자 하다보니 이부분을 미처 예상치 못하고 에러로그처럼 vue.js 나 node_modules 관련 이슈 인줄 알고 한참을 고생한거 같다…..;;

ServerAzure

[DevOps] SPA 빌드 시 import 컴포넌트 not found 에러