These dependencies were not found - tls, net in ./node_modules/.../...js

현재 개인 미니 프로젝트를 만들고 있는데 nuxt.js를 이용하고 있다. 아마 next.js를 비롯해서 vue.js 등등 webpack을 이용한 환경에서 주로 발생하는 것 같다. 

 

내 환경에서 발생한 내용은 아래와 같다. 

 

 ERROR  Failed to compile with 2 errors                                                                                                                                      friendly-errors 16:34:37  

These dependencies were not found:                                                                                                                                           friendly-errors 16:34:37  
                                                                                                                                                                             friendly-errors 16:34:37
* net in ./node_modules/redis/index.js                                                                                                                                       friendly-errors 16:34:37  
* tls in ./node_modules/redis/index.js                                                                                                                                       friendly-errors 16:34:37  
                                                                                                                                                                             friendly-errors 16:34:37  
To install them, you can run: npm install --save net tls    

 

뭐 처음에는 여기 나온 메세지대로 `npm install --save net tls` 를 해서 net과 tls를 인스톨해서 해결하고 넘어갈까 생각했는데 ... 상식적으로 브라우저에서 저런 메세지를 만나는게 이상하다. 

 

브라우저에서 왜 저걸...? 

 

일단 클라이언트 빌드 시에 레디스(redis)가 왜 따라가는지는 알수 없지만... 무작정 net과 tls를 설치하는것도 마음에 안들어서 이리저리 서치해보니.... 

 

nuxt.config.js 에 이런 내용을 추가하면 된다는 결과가 있었다. 

 

nuxt.config.js

// Build Configuration: https://go.nuxtjs.dev/config-build
  build: {
    parallel: true,
    cache: true,
    hardSource: true,
    extend(config, { isClient }) {
      // Extend only webpack config for client-bundle
      if (isClient) {
        config.devtool = 'source-map';
        
        config.node = {
          console: true,
          fs: 'empty',
          net:'empty',
          tls:'empty',
        }
        
      }
    },

 

클라이언트 빌드 시에 fs나 net, tls를 empty로 설정해놓으면 더이상 같은 에러가 발생하지 않는다.... 생각보다 의존성 문제나 빌드 환경 문제 등을 보면 이런 자잘한 문제들에 많이 부딪친다. 아직도 손으로 해줘야할게 많은... 

 

 `npm install --save net tls` 로 해결할지 config.node에 해당 것들을 비우는걸로 해결할지 장단점은 잘 모르겠지만... 상식적으로 뭔가 설치하는것보다 클라이언트에서 필요하지 않은 모듈을 걷어내는 것이 더 좋을 것으로 판단된다. 

 

왠만하면 이런 해결 내용을 정리하지 않는데 오랜 삽질이 필요해서 정리해놓는다.