[TIL 23-03-17] import crypto 오류

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. 해결

링크의 댓글을 봤다.

import crypto from "crypto-browserify";로 고쳤다.

ts파일에 작성했더니 타입이 없으니

npm i --save-dev @types/crypto-browserify하라 했는데 없었다.

그래서 js파일을 만들고 다시 작성했더니 해결됐다.