create-react-app으로 만든 프로젝트의 start가 동작하지 않는 문제

1. 문제사항

create-react-app로 작성한 프로젝트에서 바로 npm start를 시도하였으나, 오류가 발생함.

> {projet name}@0.1.0 start
> react-scripts start

node:internal/modules/cjs/loader:488
      throw e;
      ^

Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: Package subpath './lib/tokenize' is not defined by "exports" in /~/{project name}/node_modules/postcss-safe-parser/node_modules/postcss/package.json
    at new NodeError (node:internal/errors:371:5)
    at throwExportsNotFound (node:internal/modules/esm/resolve:429:9)
    at packageExportsResolve (node:internal/modules/esm/resolve:683:3)
    at resolveExports (node:internal/modules/cjs/loader:482:36)
    at Function.Module._findPath (node:internal/modules/cjs/loader:522:31)
    at Function.Module._resolveFilename (node:internal/modules/cjs/loader:919:27)
    at Function.Module._load (node:internal/modules/cjs/loader:778:27)
    at Module.require (node:internal/modules/cjs/loader:999:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at Object.<anonymous> (/~/{project name}/node_modules/postcss-safe-parser/lib/safe-parser.js:1:17) {
  code: 'ERR_PACKAGE_PATH_NOT_EXPORTED'
}

build 또한 비슷한 원인으로 수행되지 않는다.

---

2. 문제원인

• './lib/tokenize'는 "exports"에 의해 정의되지 않음.
• 해당 프로젝트에서 사용되는 모듈중에 일부가 Node 17부터 새롭게 적용된 사양인 OpenSSL 3.0의 규격을 만족하지 못하였다.

---

3. 해결방안

• 다음을 수행한다.

1. create-react-app을 실행하여 프로젝트를 생성한다.
2. nvm을 사용하여 node의 버전을 lts버전으로 한다.
   (nvm use --lts 따위)
3. 작성되었던 프로젝트의 node_modules와 yarn.lock파일을 삭제한다.
4. npm install을 수행하여 node_modules와 package-lock.json파일을 다시 설치시킨다.
5. 만약 node.js의 버전이 17 이상이라면, 기본적으로 작성되는 package.json의 scripts부문에서
   "start" : "react-scripts start" 에서 --openssl-legacy-provider를 추가하여 "react-scripts --openssl-legacy-provider start"로 한다.
   같은 방식으로, build도 추가한다.

---

4. 비고

---

5. 문제원인 파악을 위한 시행착오

6.과 통합

---

6. 문제 해결을 위한 시행착오

1. yarn start 대신 npm start를 실행하였기에 발생하였는가?

• 시도 : yarn start 하였다.
• 결과 : 똑같음

2. react-scripts에 존재하는 README는 npm으로 설치하였다면 삭제하고, npx(npm 5.2+에서 제공하는 패키지 러너 (npm과 npx)로 설치하라고 제시한다.

• 시도 : npm으로 설치하지 않고, npx로 시도한다.
• 결과 : 똑같음

3. 다음 링크에서는 node의 버전을 lts인 버전으로 다운그레이드하고, node modules와 lock파일을 삭제하고 다시 설치하라고 기재되어있다.

• 시도 : nvm을 통하여 node의 버전을 17.0.1로 하고, 프로젝트를 다시 설치하였으며, node modules와 lock파일을 삭제하고 다시 npm install 을 통하여 설치하였다.
• 결과 : 똑같음

4. npm run start로 npm으로 시도해 보았다.

• 시도 : npm run start
• 결과 :

Starting the development server...

Error: error:0308010C:digital envelope routines::unsupported
    at new Hash (node:internal/crypto/hash:67:19)
    at Object.createHash (node:crypto:130:10)
    at module.exports (/~/{project name}/node_modules/webpack/lib/util/createHash.js:135:53)
    at NormalModule._initBuildHash (/~/{project name}/node_modules/webpack/lib/NormalModule.js:417:16)
    at handleParseError (/~/{project name}/node_modules/webpack/lib/NormalModule.js:471:10)
    at /~/{project name}/node_modules/webpack/lib/NormalModule.js:503:5
    at /~/{project name}/node_modules/webpack/lib/NormalModule.js:358:12
    at /~/{project name}/node_modules/loader-runner/lib/LoaderRunner.js:373:3
    at iterateNormalLoaders (/~/{project name}/node_modules/loader-runner/lib/LoaderRunner.js:214:10)
    at iterateNormalLoaders (/~/{project name}/node_modules/loader-runner/lib/LoaderRunner.js:221:10)
/~/{project name}/node_modules/react-scripts/scripts/start.js:19
  throw err;
  ^

Error: error:0308010C:digital envelope routines::unsupported
    at new Hash (node:internal/crypto/hash:67:19)
    at Object.createHash (node:crypto:130:10)
    at module.exports (/~/{project name}/node_modules/webpack/lib/util/createHash.js:135:53)
    at NormalModule._initBuildHash (/~/{project name}/node_modules/webpack/lib/NormalModule.js:417:16)
    at /~/{project name}/node_modules/webpack/lib/NormalModule.js:452:10
    at /~/{project name}/node_modules/webpack/lib/NormalModule.js:323:13
    at /~/{project name}/node_modules/loader-runner/lib/LoaderRunner.js:367:11
    at /~/{project name}/node_modules/loader-runner/lib/LoaderRunner.js:233:18
    at context.callback (/~/{project name}/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
    at /~/{project name}/node_modules/babel-loader/lib/index.js:59:103 {
  opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
  library: 'digital envelope routines',
  reason: 'unsupported',
  code: 'ERR_OSSL_EVP_UNSUPPORTED'
}

4-1. 4.에서 발생하는 오류는 다음 링크에서는 node 17버전에서 발생하는 오류로서, 사용중인 모듈이나 어플리케이션의 키 사이즈나 알고리즘이 더 이상 OpenSSL 3.0의 default에 호용되지 않아서 생기는 오류라고 한다.

• 시도 : "start": "react-scripts start" 를 "start": "react-scripts --openssl-legacy-provider start" 로 교체해라. (뒤에 --openssl-legacy-provider를 붙임) / build도 같이 수정
• 결과 : 해결됨

---