[23-03-17 TIL] crypto import후 배포 시 오류 발생

1. 배경

사내 서비스를 개발하다가 crypto를 써야 됐다.
crypto를 추가했는데 처음엔 polyfill이 필요하다 해서 craco 파일에 webpackConfig > fallback을 추가했다.

webpackConfig.resolve = {
  ...webpackConfig.resolve,
  fallback: {
    crypto: require.resolve("crypto-browserify"),
  },
  alias: {},
};

2. 문제 발생

로컬에서는 잘 됐는데 배포 시 오류가 발생했다.

• 1차 시도
  import { createHmac } from "crypto";

• 2차 시도
  require("crypto");

• 오류 내용

Module not found: Error: You attempted to import /builds/teneleven/1011/platform-team/inoffice-buildit-co-kr/node_modules/crypto-browserify/index.js which falls outside of the project src/ directory. Relative imports outside of src/ are not supported.
You can either move it inside src/, or add a symlink to it from project's node_modules/.

3. 해결

방법1

링크의 댓글을 봤다.
import문을 import crypto from "crypto-browserify";로 고쳤다.

ts파일에 작성했더니 타입이 없으니까 npm i --save-dev @types/crypto-browserify하라 했는데 존재하지 않았다.
그래서 js파일에 새로 작성했더니 해결됐다.

방법2

crypto중에서도 hmac 기능이 필요했다.
타입이 정의된 create-hmac npm package를 다운받으면 ts파일에서 사용이 가능하다.

• 설치
  npm i create-hmac
• 사용
  import createHmac from "create-hmac";