ReactのアプリをGitHub Pagesで公開したい

Question

#React（hooks）で作ったアプリをGitHubPagesで公開したい

エラー内容（困っていること）

• こちらの記事（ディレクトリ名を変更）のやり方を参考に公開しよとうするとエラーが出る
• npm run build ができない

開発環境

• VScode
• MacBookPro
• M1Pro
• OS:Monterey

出ているエラー

counter-app % npm run build 

> counter-app@0.1.0 build
> react-scripts build && mv build docs

Creating an optimized production build...
Failed to compile.

Failed to load config "prettier" to extend from.
Referenced from: /Users/name/counter-app/.eslintrc.json

記述しているコード

{
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "prettier",
    "prettier/@typescript-eslint"
  ],
  "plugins": ["@typescript-eslint"],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "sourceType": "module"
  },
  "env": { "browser": true, "node": true, "es6": true },
  "rules": {
    // 適当なルール
  }
}

...,
"homepage": "https://(user name).github.io/(repository name)/",
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build && mv build docs",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
...,

• ※user nameは自身のgithubの名前にしています
• ※repository nameは自身のリポジトリ名にしています

試したこと

• npm run buildではなくyarn run buildを試したが同じエラーだった
• ESLintが原因だと思い、有効だったものを無効にしたりアインストールを試してみた

よろしくお願いいたします。

Comments

[hoshi-takanori]

Failed to load config "prettier" to extend from なので、GitHub Pages とは無関係な prettier の設定の問題でしょうね。もしかして eslint-config-prettier を追加すればいいかも？
https://stackoverflow.com/questions/61597932/eslint-couldnt-find-the-config-prettier-to-extend-from

[ken0426]

ご返信遅くなりました。
こちらに関してコードの記述などをしましたが、結果は変わりませんでした。
他になにかあるんですかね…

Answer 1

gh-pagesをインストールすることで解決

※今回は.jsonファイルを結構いじってしまったため、tsxファイルなどはそのままにアプリ自体を作り直しました。

手順①

• 作ったアプリのディレクトに移動しnpm install gh-pages --save-devコマンドを実行

$ npm install gh-pages --save-dev

手順②

• package.jsonファイルの記述を追加

//...
"homepage": "http://username.github.io/リポジトリ名"

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

手順③

• GitHubにリポジトリを作成
• リポジトリの作成完了後以下のコマンドでデプロイをする

$ git init
$ git remote add origin https://github.com/username/作成したリポジトリ名.git
$ npm run deploy

• git remote add origin https://github.com/username/作成したリポジトリ名.gitコマンドを実行後、「ユーザー名」と「GitHubのパスワード」を聞かれる場合がありますが、パスワードはtokenを入力してください。
• tokenの詳細はこちら(公式)
• そもそもtokenを発行していない方はこちら（参考記事）

手順④

• GitHub Pagesの設定をする
• Settings > GitHub Pages > Source で、「master branch」を選択します。
• しばらくするとアプリがGitHube Pages上で確認できる

自分はこちらで無事できましたが、何かご不明点がありましたらご連絡ください。また、"prettier"のファイルは一度消したため、そちらは解決できていません。（今回の目的はGitHub Pages上で見ることが目的だったため削除しました。）

【補足】もしデプロイに失敗した場合

• node_modulesを削除することでできると思います。

$ rm -rf node_modules
$ npm install
$ npm run deploy