🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中!

\teratail特別グッズやAmazonギフトカード最大2,000円分が当たる!/

詳細はこちら
Yarn

Yarnは、Facebook/Exponent/Google/Tildeが開発したJavaScriptのパッケージマネージャ。npmよりもインストールが速く、厳密にモジュールのバージョンを固定できるなど、npmの問題を解決。npmと互換性があり、同じpackage.jsonを使用できます。

TypeScript

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

React.js

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

Q&A

解決済

2回答

829閲覧

npx create-react-app hello-world --template typescriptが実行されない

ogakuzuko

総合スコア10

Yarn

Yarnは、Facebook/Exponent/Google/Tildeが開発したJavaScriptのパッケージマネージャ。npmよりもインストールが速く、厳密にモジュールのバージョンを固定できるなど、npmの問題を解決。npmと互換性があり、同じpackage.jsonを使用できます。

TypeScript

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

React.js

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

0グッド

0クリップ

投稿2020/12/06 07:07

編集2021/06/22 20:59

前提・実現したいこと

■ 目標
npx create-react-app hello-world --template typescriptが確りと実行されるようにしたい

■ 開発環境

text

1$ node -v 2v15.0.1 3 4$ yarn -v  51.22.10 6 7$ npm -v  ←殆どyarnの方しか使っていませんが念のため。 87.0.3 9 10$ npx create-react-app --version  ←このcreate-react-appのバージョンを4.0.1に出来れば解決すると思うのですが中々その方法が分からず… 114.0.0

  
■ 背景
初投稿です。

大岡由佳さんの『りあクト!』という本を読んでReactの学習を進めています。序盤の方で、実際にReactをローカル環境で動かす部分があるのですが、そこで詰まってしまいました。

初期設定としてのNodeなどのインストール後、npx create-react-app hello-world --template typescriptをターミナル上に打つのですが、以下に記載するようなエラーメッセージが表示されてしまいます。

11月の下旬頃、create-react-app(?)のバージョンが4.0.0から4.0.1に上がったようで、それに伴って一時typescriptのテンプレートが使えなくなったようです。しかしその数日後、その問題は修正され、今ではcreate-react-app(4.0.1)で表題のコマンドが正常に動作するという話をTwitterで見かけています。

そのため、create-react-appのバージョンを4.0.1に更新することが出来ればこの問題は解決すると考えているのですが、何をどうやってもバージョンが4.0.0のままで変わらず…。
もし分かる方がいらっしゃいましたらお力添え頂けるととても嬉しいです。

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

terminal

1$ npx create-react-app hello-world --template typescript 2 3You are running `create-react-app` 4.0.0, which is behind the latest release (4.0.1). 4 5We no longer support global installation of Create React App. 6 7Please remove any global installs with one of the following commands: 8- npm uninstall -g create-react-app 9- yarn global remove create-react-app 10 11The latest instructions for creating a new app can be found here: 12https://create-react-app.dev/docs/getting-started/ 13 14npm ERR! code 1 15npm ERR! path /Users/username/Desktop/Prog./練習/JS&React/りあクト 16npm ERR! command failed 17npm ERR! command sh -c create-react-app hello-world --template typescript 18 19npm ERR! A complete log of this run can be found in: 20npm ERR! /Users/username/.npm/_logs/2020-12-06T06_08_56_660Z-debug.log

試したこと

■ 1つ目
エラーメッセージに書いてある、

  • npm uninstall -g create-react-app
  • yarn global remove create-react-app

はどちらも実行してみました。結果は以下のとおりです。

$ npm uninstall -g create-react-app up to date in 632ms found 0 vulnerabilities
$ yarn global remove create-react-app yarn global v1.22.10 [1/2] ???? Removing module create-react-app... error This module isn't specified in a package.json file. info Visit https://yarnpkg.com/en/docs/cli/global for documentation about this command.

yarnの方ではまた別のエラーが出ているのでこれが原因という説も考えられます。

  

■ 2つ目
Create-react-app公式の一番下に書いてある、「Migrating from 4.0.0 to 4.0.1」の部分の2つのコマンド、

  • npm install --save --save-exact react-scripts@4.0.1
  • yarn add --exact react-scripts@4.0.1

も実行してみましたがやはり状況は変わりませんでした。

  
■ その他
他にも以下のものを参考に色々調べていました(どちらもstackoverflowの質問です)

](https://stackoverflow.com/questions/64924261/npx-create-react-app-name-template-typescript-error)


以上、他にもなにか追記したほうがいいことがありましたら、コメント等で教えて頂けると幸いです。
質問の仕方として至らない点が多々あるとは思いますが、何卒宜しくお願い致します。

.

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

テストテストテストテスト

投稿2021/04/07 18:56

編集2021/04/07 18:58
ogakuzuko

総合スコア10

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

自己解決

『りあクト!』著者の大岡さんのアドバイスより、

npx create-react-app@4.0.1 hello-world --template typescript

とバージョン指定をして実行したところ、確りと実行されました!

しかし、「@4.0.1」もしくは「@latest」の記述を抜いた状態で実行すると、やはり最初同様のエラー文が表示されてしまうという状態が続いています。これを放置してもいいものなのかは不安が残るところですが、一旦は確りと起動したので解決済みと致します。

投稿2020/12/06 15:40

ogakuzuko

総合スコア10

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.36%

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

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

質問する

関連した質問