Nodejs Webpack으로 빌드하는 과정에서 발생한 에러(ERROR in ./node_modules/@mapbox/node-pre-gyp/lib/util/s3_setup.js)

Webpack으로 build 하는 과정에서 발생한 에러

[error#1] bcrypt 모듈 관련 에러 문제

ERROR in ./node_modules/@mapbox/node-pre-gyp/lib/util/s3_setup.js 112:15-30 
module not found: error: can't resolve 'nock' in ~

회원가입 및 로그인 부분에서 bcrypt 모듈을 사용하여 암호화 하는 코드가 있는데 이 과정에서 파일 동작 시에는 문제가 되지 않았지만, webpack으로 압축해서 빌드하는 과정에서 문제 발생

bcrpyt와 관련된 에러가 5개 정도 떴었고, 모듈을 찾지 못하는 문제로 판단하였음

npm 공식 문서에 보면 node-gyp노드의 안정/출시 버전에서만 작동한다고 되어 있고, 노드 버전마다 호환되는 bcrypt 버전이 명시되어 있음

해결방법 1) node 버전에 맞는 bcrpyt 설치

→ 실패

해결방법 2) @mapbox/node-pre-gyp 설치

bcrypt 모듈을 사용하려면 node-gyp가 설치되어 있는 상태여야 가능. 안그러면 오류 발생

local에서 build 할 때는 문제가 없었지만, webpack 빌드 시 @mapbox/node-pre-gyp 해당 모듈이 없다고도 로그에 나와서 install -s 해보았음.

• @mapbox/node-pre-gyp다양한 버전의 node.js 타켓팅 지원
• node-gyp 는 node.js 애드온(C+++에 의해 작성된 동적 링크 공유 객체, require() 함수를 사용하여 node.js로 불러올 수 있고, 일반 node.js 모듈처럼 사용 가능한) 모듈을 컴파일 하기 위해 작성된 플랫폼 명령줄 도구

npm uninstall node-pre-gyp --save
npm install @mapbox/node-pre-gyp --save

→ 동일한 에러 발생 (결론 실패)

해결방법 3) windows-build-tools 설치

windows 빌드 도구로 네이티브 노드 모듈을 컴파일 하고 싶은 경우 해당 모듈을 설치해야 함.

공식 홈페이지 보면 더이상 사용하지 않는다고 명시되어 있음 .. 그래서 그런가 설치 안됐음.

→ 실패

해결방법 4) bcrypt 모듈 → bcrpytjs 모듈로 변경

• bcrpytjs
• javascript에 최적화된 bcrypt. node.js의 c++ bcrpyt와 호환되지만, 순수한 javascript로 작성되어 있다고 함.해당 라이브러리는 CommonJs 및 amd 로더와 호환된다고 함

먼저 모듈 변경 전에 현재 코드에서 사용하고 있는 bcrypt의 함수가 bcryptjs에도 있는지 확인하였음.

둘 다 똑같은 이름으로 사용하는 것을 확인하고, 모듈을 변경함

npm uninstall --save bcrypt
npm install --save bcryptjs

→ 성공!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

해결방법 3에 대한 여러 블로그를 찾아보다가 이 블로그를 알게되었고, bcrpytjs 모듈도 있다는 사실을 알게되었음. 그래서 모듈을 변경했더니 빌드됨ㅜ

---

[error#2] webpack으로 빌드 후 파일 실행 시 환경변수 접근 못함

에러 없이 성공적으로 webpack으로 파일을 build하여 build.js 생성

이후 해당 파일을 package.json에 입력한 스크립트대로 npm start 하여 실행하였는데 실행은 정상적으로 되나 .env 파일에 접근하여 환경변수를 불러오지 못하는 문제 발생

해결방법) webpack의 DefinePlugin() 플러그인을 이용하여 환경변수 매핑

webpack.config.js

const path = require("path");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const webpack = require("webpack");
const dotenv = require("dotenv"); //추가

dotenv.config({ //dotenv에 config 메서드를 실행하여 환경변수 등록
  path: "./.env", //환경변수가 담긴 파일
});

module.exports = {
  target: "node", //node의 기본 내장 모듈들 로드
  entry: "./src/app.js", //시작점
  output: { //빌드 결과물 위치와 파일명
    path: path.resolve(__dirname, "dist"),
    filename: "build.js",
  },
  plugins: [
    new CleanWebpackPlugin(), //webpack을 통해 빌드할 때마다 이전 build.js 삭제

        //DefinePlugin으로 환경변수 정의
    new webpack.DefinePlugin({  
      "process.env.HOST": JSON.stringify(process.env.HOST),
      "process.env.DB_USER": JSON.stringify(process.env.DB_USER),
      "process.env.PASSWORD": JSON.stringify(process.env.PASSWORD),
      "process.env.DATABASE_NAME": JSON.stringify(process.env.DATABASE_NAME),
      "process.env.TYPE": JSON.stringify(process.env.TYPE),
      "process.env.PROJECT_ID": JSON.stringify(process.env.PROJECT_ID),
      "process.env.PRIVATE_KEY": JSON.stringify(process.env.PRIVATE_KEY),
      "process.env.CLIENT_EMAIL": JSON.stringify(process.env.CLIENT_EMAIL),
      "process.env.CLIENT_ID": JSON.stringify(process.env.CLIENT_ID),
      "process.env.AUTH_URI": JSON.stringify(process.env.AUTH_URI),
      "process.env.TOKEN_URI": JSON.stringify(process.env.TOKEN_URI),
      "process.env.AUTH_PROVIDER_X509_CERT_URI": JSON.stringify(
        process.env.AUTH_PROVIDER_X509_CERT_URI
      ),
      "process.env.CLIENT_X509_CERT_URI": JSON.stringify(
        process.env.CLIENT_X509_CERT_URI
      ),
    }),
  ],
  stats: { //빌드 과정에서 에러 발생 시 detail 정보 표시
    errorDetails: true,
  },
};

참고문서

https://webpack.kr/configuration/stats/