Mac M1 React環境構築

Question

実現したいこと

npm installしたい
(目的）npm startでReactをブラウザで動かせるようにしたい

前提

環境構築初学者です。
Reactを勉強しようと思い、こちらを参考に環境構築していました。
全ての工程を終え、npm startをしたところエラーが出て、格闘していたらnpm installすらできなくなってしまいました。

発生している問題・エラーメッセージ

npm ERR! code EJSONPARSE
npm ERR! path /Users/shiori/ReactTest/package.json
npm ERR! JSON.parse Expected double-quoted property name in JSON at position 794 while parsing '{
npm ERR! JSON.parse   "name": "reacttest",
npm ERR! JSON.parse   "version": "1'
npm ERR! JSON.parse Failed to parse JSON data.
npm ERR! JSON.parse Note: package.json must be actual JSON, not just JavaScript.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/shiori/.npm/_logs/2023-04-02T05_28_58_573Z-debug-0.log

該当のソースコード

{
  "name": "reacttest",
  "version": "1.0.0",
  "description": "React test",
  "private": true,
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server",
    "webpack": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@babel/cli": "^7.21.0",
    "@babel/core": "^7.21.4",
    "@babel/preset-env": "^7.21.4",
    "@babel/preset-react": "^7.18.6",
    "babel-eslint": "^10.1.0",
    "babel-loader": "^9.1.2",
    "css-loader": "^6.7.3",
    "eslint": "^7.32.0",
    "eslint-loader": "^4.0.2",
    "eslint-plugin-react": "^7.32.2",
    "style-loader": "^3.3.2",
    "webpack": "^5.77.0",
    "webpack-cli": "^5.0.1",
    "webpack-dev-server": "^4.13.2"
  },
}

試したこと

恐らく「"devDependencies": {」ここら辺の二重符がないことらしいですが、
特にいじってないですし、どこが変なのかわかりませんでした。。。

「 "webpack-dev-server": "^4.13.2"
},」←ここのカンマがなかったので付け足してみました。（がエラー文は変わりませんでした）

補足情報（FW/ツールのバージョンなど）

macOS M1 Ventura13.2.1

初歩的なことだと思いますが、ご教授いただけたら幸いです。
よろしくお願いいたします。

Answer 1

Reactにはあまり詳しくはないですが、回答します。

package.jsonの33行目の,が不要かと思います。

 32       "webpack-dev-server": "^4.13.2"
 33    },
 34}

↓
そのため、以下が正しい記述になるかと思います。

{
  "name": "reacttest",
  "version": "1.0.0",
  "description": "React test",
  "private": true,
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server",
    "webpack": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@babel/cli": "^7.21.0",
    "@babel/core": "^7.21.4",
    "@babel/preset-env": "^7.21.4",
    "@babel/preset-react": "^7.18.6",
    "babel-eslint": "^10.1.0",
    "babel-loader": "^9.1.2",
    "css-loader": "^6.7.3",
    "eslint": "^7.32.0",
    "eslint-loader": "^4.0.2",
    "eslint-plugin-react": "^7.32.2",
    "style-loader": "^3.3.2",
    "webpack": "^5.77.0",
    "webpack-cli": "^5.0.1",
    "webpack-dev-server": "^4.13.2"
  }
}

JSONの形式がおかしいというエラーの時は、以下のようなサイトを使うと便利です。（間違っている付近を赤色で表示してくれます。）
https://tools.m-bsys.com/dev_tools/json-beautifier.php

---

参照されている記事が古く、更新もされていません。
そのため、上記のエラーが解決してもWebpackのバージョンの関係で、webpack.config.jsの記述でエラーが出るかと思います。

著者様が最新の導入手順をgithubで更新してくださっているため、もし本記事でうまく行かない場合は、以下のgithubリポジトリも確認してみてください
https://github.com/yuumi3/react_book

記事にあるように、↓のwebpack.config.jsの記述に変更すれば動くかと思います。
https://github.com/yuumi3/react_book/blob/master/projects/hello_react/webpack.config.js

Answer 2

←ここのカンマがなかったので付け足してみました。（がエラー文は変わりませんでした）

JSONは最後のカンマはつけないので、
ついていないままでOKと思いました。

質問欄に記載されていたpackage.jsonを使ってnpm installしてみました。
エラーはなく終了しました。

% npm install
npm WARN deprecated babel-eslint@10.1.0: babel-eslint is now @babel/eslint-parser. This package will no longer receive updates.
npm WARN deprecated eslint-loader@4.0.2: This loader has been deprecated. Please use eslint-webpack-plugin

added 628 packages, and audited 629 packages in 26s

102 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

＊わからないですが、
私も過去npm installでエラーになって、
しばらくしてから、新しく別のディレクトリでやり直したら正常終了したことがありました。
npmのリポジトリ側のパッケージのアップデートがされた日だったようなのですが、
微妙なタイミングによって正しくないファイルが取得されてうまくいかなかったのかな？と思っています。

node_modulesディレクトリを削除してから、
再度npm installしてみたらいかがでしょうか？

Comments

[shii]

ご回答ありがとうございます。

package.jsonファイルを上記のように変更したところ、
私も同じように表示され、無事npm install できました！！
node_modules削除はしていたものの、ここの表記が誤りだったためできていなかったようです。

質問は解決いたしました。
ご丁寧に解説していただきありがとうございました。