Type error: Cannot find module ... Github Actions Ubuntu 환경

 

Github Actions로 배포 자동화를 설정하기 위해서 yml 파일을 작성하고 push 했는데 위에 사진과 같이 파일 경로를 찾지 못하는 문제가 발생했다.

로컬 개발환경에서 build시에는 문제가 없는데 Github Actions에서 build시에만 Type error: Cannot find module '@/assets/icons' or its corresponding type declarations. 오류가 발생했다.

오류 해결 과정에서 세웠던 가설들과 해결 과정 3가지를 적어보려한다.

첫번째,

가설: Next.js 13에서는 터보팩으로 전환했지만 여전히 Webpack을 번들러로 사용하고. Webpack은 TS 컴파일 단계와 다른 단계에서 실행되므로 tsconfig.json을 고려하지 않는다. 그러므로 tsconfig.json의 paths가 제대로 적용되지 않는것이 문제이다.

해결방법: next.config.js에 webpack config.resolve.alias 옵션을 사용해서 @를 경로에 맞게 수정되도록 설정한다.

/** @type {import('next').NextConfig} */

const nextConfig = {

reactStrictMode: false,

webpack(config) {

config.resolve.alias = {

...config.resolve.alias,

'@': path.join(__dirname, '/'),

};

return {

...config,

  ...

      ... 기타 설정 생략

      ...

...

결론: 하지만 나의 경우 동일하게 Cannot find moudle 에러가 발생했다.

두번째, 

가설: typescript는 devDependencies에 작성되어 설치되는데 build 할 때 환경이 NODE_ENV=production이므로 devDependencies에 작성된 모듈들이 제대로 설치되지않아서 해당 오류가 발생한다.

해결방법: devDependencies도 제대로 설치되게하고 그다음 프로젝트를 build 할 수 있도록 npm run build 명령어를 다음과 같이 변경한다. 

$ npm install --production=false && npm run build

결론: 하지만 나의 경우 동일하게 Cannot find moudle 에러가 발생했다.

세번째, 

가설:  파일명 대소문자를 변경한적이 있다면 이러한 변경 사항이 해당 문제의 원인일 수 있다. Github Actions에서 build시 사용하는 환경은 Ubuntu 환경이고 개발 환경은 MacOS인데 Ubuntu 환경은 대소문자를 구분하고 MacOS 환경은 대소문자를 구분하지않는 파일 시스템의 차이로인해 해당 문제가 발생한다.

해결방법: Github에 업로드된 파일명과 현재 로컬 개발환경에서 사용되고있는 파일명의 대소문자가 동일한지 확인하고 다르다면 이를 맞춰준다. Github에 업로드된 파일명과 현재 로컬 개발환경에서의 파일명 대소문자에 차이가 없더라도 파일명 대소문자를 변경한적이 있다면 문제가 되는 파일 전부를 다른곳으로 이동시키고 프로젝트를 커밋하고 문제가 된 파일들을 다시 가져와서 커밋하는 방식으로 문제 해결이 가능하다. 하지만 이러한 여러 절차 없이 아래 명령어로 한번에 해결이 가능하다.

$ git rm -r --cached . && git add --all . 

결론: 나의 경우 세번째 방법을 통해 문제를 해결할 수 있었다. 파일명 대소문자를 변경했던것과 build하는 환경의 차이로 발생된 문제였다.