質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
87.20%
npm

npmは、Node Packaged Modulesの略。Node.jsのライブラリ・パッケージを管理できるツールです。様々なモジュールを簡単にインストールでき、自分でモジュールを作成し公開する際にも使用できます。

JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

解決済

Unexpected token in JSON at position 0 , throw err

Rejack
Rejack

総合スコア10

npm

npmは、Node Packaged Modulesの略。Node.jsのライブラリ・パッケージを管理できるツールです。様々なモジュールを簡単にインストールでき、自分でモジュールを作成し公開する際にも使用できます。

JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

1回答

0リアクション

1クリップ

204閲覧

投稿2022/08/03 11:26

前提

プログラム歴1年未満

実現したいこと

React18+TS+Flask+MySQL環境にてユーザーからの入力値をリアルタイムで受け取り、受け取ったデータがあれば画面に表示するアプリを構築している際にWindowsがクラッシュしてしまいました。

以後 npm startを行うも以下のメッセージが表示されローカルサーバーが立ち上がらず困っています。

どのようにすれば正常に起動することができるでしょうか。
初歩的な質問になると思われますがご教示願います

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

frontend\node_modules\react-scripts\scripts\start.js:19 throw err; SyntaxError: Unexpected token in JSON at position 0 at JSON.parse (<anonymous>) at Object.getBuildInfo (frontend\node_modules\typescript\lib\typescript.js:110534:21) at readBuilderProgram (frontend\node_modules\typescript\lib\typescript.js:123290:28) at Object.createWatchProgram (frontend\node_modules\typescript\lib\typescript.js:123446:26) at Object.<anonymous> (frontend\node_modules\fork-ts-checker-webpack-plugin\lib\typescript-reporter\reporter\TypeScriptReporter.js:304:59) at Generator.next (<anonymous>) at frontend\node_modules\fork-ts-checker-webpack-plugin\lib\typescript-reporter\reporter\TypeScriptReporter.js:8:71 at new Promise (<anonymous>) at __awaiter (frontend\node_modules\fork-ts-checker-webpack-plugin\lib\typescript-reporter\reporter\TypeScriptReporter.js:4:12) at Object.getIssues (frontend\node_modules\fork-ts-checker-webpack-plugin\lib\typescript-reporter\reporter\TypeScriptReporter.js:227:28)

該当のソースコード

*試した事(2)の追加コード&出力内容(frontend\node_modules\react-scripts\scripts\start.js:19) process.on('unhandledRejection', err => { tyr { throw err; } //tyr節の追加 catch(e) { console.log(e) } }); →コンソール( Compiled successfully! You can now view frontend in the browser. Local: http://localhost:3000 On Your Network: http://{略}:3000 Note that the development build is not optimized. To create a production build, use npm run build. webpack compiled successfully (node:8112) PromiseRejectionHandledWarning: Promise rejection was handled asynchronously (rejection id: 1) SyntaxError: Unexpected token in JSON at position 0 ...以下.  上記記載の[発生している問題・エラーメッセージ]同様文章

試したこと

1.create react app を別に構築しnpm start を行った.
→問題なく起動する
2.try節を追加することでサーバーは起動する。
が常に[発生している問題・エラーメッセージ]記載内容がコンソールに表示されている。
またhttps://qiita.com/103ma2/items/9cfab6604f813720d482
好ましくない状態だとも書いてもいる
3.npm doctorで検証?
npm ping ok
npm -v ok current: v8.15.1, latest: v8.15.1
node -v ok current: v16.16.0, recommended: v16.16.0
npm config get registry ok using default registry (https://registry.npmjs.org/)
which git not ok Install git and ensure it's in your PATH.
Verify cache contents ok verified 6100 tarballs

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

ここにより詳細な情報を記載してください。

以下のような質問にはリアクションをつけましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

リアクションが多い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

maisumakun

2022/08/03 12:22

tsconfig.jsonはどのようになっていますか?
Rejack

2022/08/03 13:16

ご質問ありがとうございます. { "compilerOptions": { "target": "es5", "lib": [ "dom", "dom.iterable", "esnext" ], "allowJs": true, "skipLibCheck": true, "esModuleInterop": true, "allowSyntheticDefaultImports": true, "strict": true, "forceConsistentCasingInFileNames": true, "noFallthroughCasesInSwitch": true, "module": "esnext", "moduleResolution": "node", "resolveJsonModule": true, "isolatedModules": true, "noEmit": true, "jsx": "react-jsx" }, "include": [ "src" , "src/redux/hooks.tsx" ] } 初期状態から一度も触った事は無く、お恥ずかしい話このファイルがどの様な役割を担っているのかすら実は解っていません。_(._.)_

まだ回答がついていません

会員登録して回答してみよう

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

npm

npmは、Node Packaged Modulesの略。Node.jsのライブラリ・パッケージを管理できるツールです。様々なモジュールを簡単にインストールでき、自分でモジュールを作成し公開する際にも使用できます。

JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。