JS Crypto Module Build - Module Not Found Error

FGPRJS·2022년 12월 19일
0

다음과 같은 오류가 발생할 때의 오류 해결법이다.

Module not found: Error: Can't resolve 'crypto' in '~\node_modules\encrypt-rsa\build'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.
If you want to include a polyfill, you need to:
- add a fallback 'resolve.fallback: { "crypto": require.resolve("crypto-browserify") }'
- install 'crypto-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "crypto": false }

Crypto 같은 특정 모듈을 사용할 때, create-react-app이 5버전 이상일 때 발생하는 오류이다.

다음 링크에서 원인과 해결법을 설명한다.
아래는 이를 일부 번역한 것이다.

왜 Polyfill node core 모듈 오류가 발생합니까?

최신 웹팩 버전이 되기 전 (웹팩 버전 < 5)에는 NodeJS 폴리필을 기본으로 추가하였다. 그런데 현재의 웹팩 버전은 더 이상 NodeJS 폴리필을 기본으로 제공하지 않으며, 이것은 web3.js나 alchemyweb3.js 따위의 라이브러리를 사용해 어플리케이션을 만드려고 할 때 문제의 원인이 된다.


해결법

polyfill 오류가 발생하는 것은 그냥 create-react-app 그 자체 때문이다. node-modules 안에 webpack config file을 숨겨놓았으며, 그렇게 하여 빌드타임에 그 파일을 생성하고 그에 따라 개발자들이 수정할 수 없게 만들었다.

다행히 react-app-rewired라는 패키지가 있어, 개발자들에게 웹팩 설정 파일을 쉽게 수정하고, 폴리필 노드 코어 모듈 오류를 수정할 수 있게 하였다.

다음을 수행하면 된다.

  1. react-app-rewired 설치하기
npm install --save-dev react-app-rewired
  1. 빠진 의존성 모듈을 추가한다.
 
npm install --save-dev crypto-browserify stream-browserify assert stream-http https-browserify os-browserify url buffer process
  1. create-react-app 웹팩 설정 파일 오버라이드하기

프로젝트의 최상위(root) 폴더에 config-overrides.js 라는 파일을 만들고 이하를 작성한다.

const webpack = require('webpack'); 
module.exports = function override(config) { 
		const fallback = config.resolve.fallback || {}; 
		Object.assign(fallback, { 
    	"crypto": require.resolve("crypto-browserify"), 
      "stream": require.resolve("stream-browserify"), 
      "assert": require.resolve("assert"), 
      "http": require.resolve("stream-http"), 
      "https": require.resolve("https-browserify"), 
      "os": require.resolve("os-browserify"), 
      "url": require.resolve("url") 
      }) 
   config.resolve.fallback = fallback; 
   config.plugins = (config.plugins || []).concat([ 
   	new webpack.ProvidePlugin({ 
    	process: 'process/browser', 
      Buffer: ['buffer', 'Buffer'] 
    }) 
   ]) 
   return config; }
  1. package.json을 웹팩 설정을 포함해 오버라이딩하기
    package.json 중 scripts 부문을 다음과 같이 수정한다.
"scripts": { 
	"start": "react-app-rewired start", 
  "build": "react-app-rewired build", 
  "test": "react-app-rewired test", 
  "eject": "react-scripts eject" 
 },

react-scripts -> react-app-rewired로 수정한 것이다.

profile
FGPRJS

0개의 댓글