yarn add -D react-app-rewired customize-cra

// package.json
"scripts": {
  "start": "react-app-rewired start",
  "build": "react-app-rewired build",
  "test": "react-app-rewired test"
},

// .babelrc
{
  "plugins": [
    ["@babel/plugin-proposal-decorators", { "version": "legacy" }],
    ["@babel/plugin-proposal-class-properties", { "loose": true }]
  ]
}

useBabelRc() 가 CRA 의 babel 설정 대신 .babelrc 를 쓰게 한다.¹

// config-overrides.js
const { useBabelRc, override } = require('customize-cra')

module.exports = override(useBabelRc())

---

• Simplest Way to Install Babel Plugins in Create React App - DEV Community 👩‍💻👨‍💻

---

CRACO로 구성하는게 지금은 맞는 것 같다.

Footnotes

1. customize-cra api.md — useBabelRc(): “Causes your .babelrc (or .babelrc.js) file to be used, this is especially useful if you’d rather override the CRA babel configuration…” ↩

CRA 는 .env 의 ${VAR} 를 이미 있는 환경 변수로 채운다(dotenv-expand)¹ — turbo 가 태스크마다 넣어주는 TURBO_HASH² 를 그대로 받아 쓴다.

# .env
REACT_APP_VERSION=0.0.0-${TURBO_HASH}

REACT_APP_VERSION을 자동으로 입력할 방법을 찾다가 결국 hash값을 추가했다.

---

• Adding Custom Environment Variables | Create React App
• GitHub - motdotla/dotenv-expand: Variable expansion for dotenv. Expand variables already on your machine for use in your .env file.
• Create timestamp variable in bash script - Stack Overflow

Footnotes

1. Adding Custom Environment Variables | Create React App: “Expand variables already on your machine for use in your .env file (using dotenv-expand).” ↩

2. System environment variables | Turborepo: “Turborepo will make the following environment variables available within your tasks while they are executing” — TURBO_HASH: “The hash of the currently running task.” ↩