티스토리 뷰
Node.js에서 React, Vue 등의 프로젝트를 빌드 할 때 발생하는 다음 오류에 대한 대응방법을 정리하였습니다.
오류내용
Node.js 버전 17 이상으로 업데이트 한 경우, 프로젝트 빌드 시 다음과 같은 오류가 발생할 수 있습니다.
{
opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
library: 'digital envelope routines',
reason: 'unsupported',
code: 'ERR_OSSL_EVP_UNSUPPORTED'
}
오류원인
Node.js는 버전 17부터 OpenSSL 3.0을 포함하게 되었습니다. OpenSSL 3.0은 허용하는 알고리즘과 Key 크기를 엄격하게 제한하기 때문에, OpenSSL과 관련된 패키지에 문제가 발생할 수 있습니다. ERR_OSSL_EVP_UNSUPPORTED 오류가 발생한다는 것은 프로젝트나 패키지가 OpenSSL 3.0에서 허용하지 않는 알고리즘이나 Key 크기를 사용한다는 의미입니다.
해결방법
방법1: --openssl-legacy-provider 사용
구버전을 사용하는 프로젝트나 패키지를 위해 '--openssl-legacy-provider' 옵션을 제공합니다. 이 옵션을 사용하면 구버전의 OpenSSL을 사용하므로 이슈가 해결될 수 있습니다.
- React 프로젝트 : package.js를 열고 아래와 같이 추가
{
...
"version": "0.1.0",
"private": true,
"scripts": {
"start": "react-scripts --openssl-legacy-provider start",
"build": "react-scripts --openssl-legacy-provider build",
"test": "cross-env CI=true react-scripts test --env=jsdom",
"eject": "react-scripts eject",
"lint": "eslint ./src/**/*.ts ./src/**/*.tsx"
},
} - Vue 프로젝트 : package.js를 열고 아래와 같이 추가
{
...
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "set NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve",
"build": "set NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service build",
"lint": "vue-cli-service lint"
},
...
}
방법2: 문제가 발생하는 패키지 업데이트
문제를 일으키는 패키지를 최신버전으로 업데이트하면 해결될 수 있습니다. 오류 내용을 살펴보고 문제가 발생하는 패키지를 찾아 버전을 업데이트 해보세요. 예를들어 React 프로젝트의 경우 react-scripts 패키지에서 문제가 발생하는데, 버전을 5.0.1 이상으로 업데이트하는 경우 문제가 해결됩니다.
방법3: Node.js 버전 16이하 설치
가장 단순하고 확실한 방법입니다. NPM 웹사이트에서 Node.js 16 이하 버전을 다운로드하여 설치하면 문제가 해결됩니다.
References
- Node.js v17 업데이트 안내 : https://nodejs.org/es/blog/release/v17.0.0#openssl-3.0
'Web > React' 카테고리의 다른 글
[React] AntDesign Modal을 Draggable로 만들기 (0) | 2022.07.18 |
---|---|
[React] Material-UI를 쓰지 말아야 하는 이유 (0) | 2022.07.15 |
[React] MUI 장점과 단점 (1) | 2022.07.14 |
[React] ASP.NET Core React Project Template 사용 (0) | 2021.07.23 |
[React] package.json (0) | 2021.07.15 |
[React] npm 설치 중 이슈 - fsevents (0) | 2021.07.07 |
[React] 리덕스를 이용한 상태관리 (0) | 2021.07.04 |
[React] 클래스형 컴포넌트 (0) | 2021.06.23 |
- Xamarin.iOS
- WPF
- Android
- TypeScript
- Xamarin
- Xamarin.Forms eBook
- Xamarin.Forms 요약
- Vue
- ios
- .NET Standard
- VisualStudio
- material-ui
- ASP.NET Core
- Xamarin.Forms
- MS SQL
- React
- flutter
- StringComparison
- c#
- npm
- Total
- Today
- Yesterday