다음과 같은 오류가 발생할 때의 오류 해결법이다.
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버전 이상일 때 발생하는 오류이다.
다음 링크에서 원인과 해결법을 설명한다.
아래는 이를 일부 번역한 것이다.
최신 웹팩 버전이 되기 전 (웹팩 버전 < 5)에는 NodeJS 폴리필을 기본으로 추가하였다. 그런데 현재의 웹팩 버전은 더 이상 NodeJS 폴리필을 기본으로 제공하지 않으며, 이것은 web3.js나 alchemyweb3.js 따위의 라이브러리를 사용해 어플리케이션을 만드려고 할 때 문제의 원인이 된다.
polyfill 오류가 발생하는 것은 그냥 create-react-app 그 자체 때문이다. node-modules 안에 webpack config file을 숨겨놓았으며, 그렇게 하여 빌드타임에 그 파일을 생성하고 그에 따라 개발자들이 수정할 수 없게 만들었다.
다행히 react-app-rewired라는 패키지가 있어, 개발자들에게 웹팩 설정 파일을 쉽게 수정하고, 폴리필 노드 코어 모듈 오류를 수정할 수 있게 하였다.
다음을 수행하면 된다.
npm install --save-dev react-app-rewired
npm install --save-dev crypto-browserify stream-browserify assert stream-http https-browserify os-browserify url buffer process
프로젝트의 최상위(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; }
"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
로 수정한 것이다.