[Vue/Electron ISSUE] 외부 모듈 Cannot find module 문제

1. 개요

외부 모듈을 npm으로 설치하여 package.json 에 의존성 정보 삽입 및 node_modules에 설치가 되었다.

 

하지만 serve 명령어로 electron을 띄었을 시에는 해당 모듈 import시 문제가 발생하지 않았는데,

build 명령어로 프로그램을 빌드 후 실행하였을때 해당 모듈 import시 아래와 같이 Cannot find module 에러가 떴다.

 

serve시에는 로컬에 이미 설치되어 있는 모듈을 잘 참조하지만,

빌드시에는 해당 모듈이 package.json에 관리되어 있어도, electron-builder가 프로그램에 필요한 모듈이라 생각하지 않아 설치되지 않고 빌드되어, 참조시에 에러가 발생하는 모양이다.

 

2. 해결방법

해결책을 찾은 사이트: https://stackoverflow.com/a/63159052/13352386

 

이 내용은 공식문서에도 잘 나와있지 않은듯 하다.

 

아래와 같이 프로젝트 root 레벨에 vue.config.js 파일이 없다면 생성해 주고,

 

 

pluginOptions > electronBuilder > externals 에 해당 문제가 되는 모듈의 이름을 넣어주면 된다.

 

[설정예시]

module.exports = {
  ..
  pluginOptions: {
    electronBuilder: {
      externals: ["@ffmpeg-installer/ffmpeg", ...]
    }
  }
  ..
}

 

 

 

3. 해결결과

그 이후 해당 문제가 발생했던 부분에서 모듈이 정상적으로 import 되고, import된 모듈을 Source탭의 Page탭 및 require.cache 명령어로 확인할 수 있었다.