[Compose Web] moko 라이브러리 삭제 시, Error: Cannot find module 'mini-css-extract-plugin'

Compose Multiplatform에서 Resources를 사용할 수 있다는 소식을 듣고 마음속에 품고 살다, 이번주 열리는 상권님의 Native vs Flutter 그리고 KMP 컨퍼런스 발표 자료를 완성하자마자 신나게 달려갔습니다.

 

기존 프로젝트에서 이미 moko-resources 라이브러리를 사용하고 있었기에 이를 해체하기 위해 moko 관련 변수, 함수 및 dependency 등 모두 해제하고 gradle clean까지 완벽하게 한 상태에서 두근두근하게 실행을 해보았더니 다음과 같은 오류를 만날 수 있었습니다.

Execution failed for task ':jsBrowserDevelopmentRun'.
> [webpack-cli] Failed to load '/Users/holy-knight/Documents/Development/Multiplatform/Research/KUG-SEOUL/build/js/packages/KUG-SEOUL/webpack.config.js' config
  [webpack-cli] Error: Cannot find module 'mini-css-extract-plugin'
  Require stack:
  - /Users/holy-knight/Documents/Development/Multiplatform/Research/KUG-SEOUL/build/js/packages/KUG-SEOUL/webpack.config.js
  - /Users/holy-knight/Documents/Development/Multiplatform/Research/KUG-SEOUL/build/js/node_modules/webpack-cli/lib/webpack-cli.js
  - /Users/holy-knight/Documents/Development/Multiplatform/Research/KUG-SEOUL/build/js/node_modules/webpack-cli/lib/bootstrap.js
  - /Users/holy-knight/Documents/Development/Multiplatform/Research/KUG-SEOUL/build/js/node_modules/webpack-cli/bin/cli.js
  - /Users/holy-knight/Documents/Development/Multiplatform/Research/KUG-SEOUL/build/js/node_modules/webpack/bin/webpack.js
  - /Users/holy-knight/Documents/Development/Multiplatform/Research/KUG-SEOUL/build/js/node_modules/webpack/bin/webpack.js
      at Module._resolveFilename (node:internal/modules/cjs/loader:995:15)
      at Module._load (node:internal/modules/cjs/loader:841:27)
      at Module.require (node:internal/modules/cjs/loader:1061:19)
      at require (node:internal/modules/cjs/helpers:103:18)
      at /Users/holy-knight/Documents/Development/Multiplatform/Research/KUG-SEOUL/build/js/packages/KUG-SEOUL/webpack.config.js:81:34
      at Object.<anonymous> (/Users/holy-knight/Documents/Development/Multiplatform/Research/KUG-SEOUL/build/js/packages/KUG-SEOUL/webpack.config.js:119:3)
      at Module._compile (node:internal/modules/cjs/loader:1159:14)
      at Module._extensions..js (node:internal/modules/cjs/loader:1213:10)
      at Module.load (node:internal/modules/cjs/loader:1037:32)
      at Module._load (node:internal/modules/cjs/loader:878:12) {
    code: 'MODULE_NOT_FOUND',
    requireStack: [
      '/Users/holy-knight/Documents/Development/Multiplatform/Research/KUG-SEOUL/build/js/packages/KUG-SEOUL/webpack.config.js',
      '/Users/holy-knight/Documents/Development/Multiplatform/Research/KUG-SEOUL/build/js/node_modules/webpack-cli/lib/webpack-cli.js',
      '/Users/holy-knight/Documents/Development/Multiplatform/Research/KUG-SEOUL/build/js/node_modules/webpack-cli/lib/bootstrap.js',
      '/Users/holy-knight/Documents/Development/Multiplatform/Research/KUG-SEOUL/build/js/node_modules/webpack-cli/bin/cli.js',
      '/Users/holy-knight/Documents/Development/Multiplatform/Research/KUG-SEOUL/build/js/node_modules/webpack/bin/webpack.js'
    ]
  }

원인은 webpack.config.js?

우선 Failed 안내로 따라가보니 build 디렉터리 내 js/packages/{PROJECT\_NAME}/webpack.config.js에서 moko가 사용하고 있는 mini-css-extract-plugin을 찾지 못해 발생하는 문제였습니다.

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

또한 해당 디렉터리 및 karma.config.d 디렉터리에서도 moko-resources-generated.js 파일도 있었기에 clean이 안됐나 하는 생각에 조금이라도 연관되어보이는 파일을 하나하나 삭제해보았습니다.

죽여도 죽여도 돌아오는 moko

그러나 아무리 파일을 삭제하더라도 moko와 관련된 js파일은 계속 생성이 되었고, 혹시나 프로젝트와 IDE 어딘가 캐시가 남아있나 하는 생각으로 Fleet에서 IntelliJ Idea로 컴파일 시도 및 .gradle 도 삭제해보았지만 마찬가지 였습니다. 그리고 이 과정에서 .gradle 내 moko 관련 파일들이 지속적으로 생성되는 모습을 확인하였습니다.

범인은 프로젝트 어딘가에 있다

결국 어디선가 moko를 사용하도록 하는 주체가 있다고 생각하여 열심히 지우고 수정하고 삭제의 반복을 해도 똑같은 오류가 발생하여 포기하려는 순간, 혹시나 하는 마음으로 터미널에서 grep -rl 'moko' . 를 실행해보니 webpack.config.d 디렉터리 내 숨어있는 moko-resources-generated.js 만나게 되었습니다.

잡았다 요놈

결론은 webpack.config.d 삭제하면 문제 해결됩니다.

해당 디렉터리는 최상위 경로에 존재하였기에 자연스럽게 기본 webpack 설정 파일이라 생각하였으며 프로젝트 내 moko 검색에도 노출되지 않았습니다. 혹시나 하는 마음에 해당 디렉터리를 삭제하니 정상적으로 빌드되는 모습을 확인할 수 있었습니다. (모든 것을 의심하자)