2022-01-19 TIL

React 프로젝트 Github으로 배포

1) 패키지 설치

npm install gh-pages --save-dev

2) package.json 파일에 코드 추가 하기

//....
"homepage": "http://JIHYE-P.github.io/react-github-pages"

"scripts": {
  //...
  "predeploy": "npm run build",
  "deploy": "gh-pages -d build"
}

3) 실행 하기

npm run deploy

✔ 문제발생

01. readme 파일이 나와요

Github Page Source를 gh-pages branch로 변경

02. npm run deploy하면 에러가 떠요

npm run deploy시 계속 아래의 오류가 발생했다.

TypeError: MiniCssExtractPlugin is not a constructor
    at module.exports (G:\FE\hodu\node_modules\react-scripts\config\webpack.config.js:664:9)
    at Object.<anonymous> (G:\FE\hodu\node_modules\react-scripts\scripts\build.js:58:16)
    at Module._compile (node:internal/modules/cjs/loader:1101:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81:12)
    at node:internal/main/run_main_module:17:47

stackoverflow에서 해결방법을 찾았는데, 먼저 다음의 1,2단계를 수행 후,

1) package.json 에 다음을 추가한다.

 "resolutions": {
    "mini-css-extract-plugin": "2.4.5"
  },

2) 터미널에 다음을 입력한다.

npm i -D --save-exact mini-css-extract-plugin@2.4.5

다시 push하고 `npm run deploy`하는 것으로 해결할 수 있었다.

git add .
git commit -m ''
git push origin

npm run deploy

✨ 참고 - 배포하기
https://velog.io/@byjihye/react-github-pages

✨ 참고 - 에러 발생
https://stackoverflow.com/questions/70715794/typeerror-minicssextractplugin-is-not-a-constructor/70716720