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

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

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

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

Yarn

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

JavaScript

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

React.js

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

Q&A

0回答

1235閲覧

Reactでyarn run startしても空白画面しか表示されない

max123

総合スコア0

npm

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

Yarn

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

JavaScript

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

React.js

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

0グッド

1クリップ

投稿2022/04/15 12:49

編集2022/04/15 13:46

githubからダウンロードしたwebアプリを開発環境で実行したいのですが、ブラウザが真っ白になってしまい何も描画されません。

・githubからclone後、package-lock.json、node_modulesを削除の上、プロジェクトフォルダ内でyarnをインストール。buildの上、yarn run startで実行すると、コード内の変数についてwarningが出る(defined but never used)が、エラーはなく、localhost::3000が開くものの、真っ白という状態。
・index.js内のBrowserRouterHasuRouterにしてみるー>効果なし
・package.jsonに"homepage": ".",を追加ー>効果なし。"homepage": "./",でも同様。そもそもgithubからダウンロードした時にはhomepageの項目はなかったので、なくても作用していた模様。
set NODE_ENV = developmentを実行済み。
npm startでも同様の現象。
・yarn 1.22.15
・MacOS12.3.1

不足している情報があれば可能な限り補足させていただきます。
ご意見いただけましたら幸いです。何卒よろしくお願い申し上げます。

[追記]
package-lock.jsonはgithub内でもともと提供されていたので、それを入れたままnpm startを試みましたが、下記のようなコメントが出て実行できませんでした。やはり一度消さないとダメなようです。

To fix the dependency tree, try following the steps below in the exact order: 1. Delete package-lock.json (not package.json!) and/or yarn.lock in your project folder. 2. Delete node_modules in your project folder. 3. Remove "webpack" from dependencies and/or devDependencies in the package.json file in your project folder. 4. Run npm install or yarn, depending on the package manager you use.

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

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

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

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

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

hoshi-takanori

2022/04/15 13:27

差し支えなければ github の URL を貼りましょう。また、create-rwact-app したものは動きますか?
max123

2022/04/15 13:29

コメントどうもありがとうございます。大変申し訳ございません、githubがprivateのためURLは提供できません。一方、別途create-rwact-app したものは問題なく動きました。
hoshi-takanori

2022/04/15 13:33

なるほど。もともと node_modules があるということは、それを消さずに npm start したら動くのでは?
max123

2022/04/15 13:44 編集

ご指摘いただいて確認したところ、node_moduleはもともとありませんでした。一方でpackage-lock.jsonはあったので、それを入れた状態でnpm startしてみましたが、特にうまく行かないようです。色々と恐れ入ります。 また、package-lock.jsonを削除しない状態だと、結局エラーが出て実行できませんでした(質問に追記します)
hoshi-takanori

2022/04/15 14:21

package-lock.json があるということは、もともと yarn ではなく npm でパッケージ管理されてたということなので、まず npm install して node_modules にパッケージを入れる必要があるかと。
max123

2022/04/15 16:07

ありがとうございます。npm installも行いましたが、効果がないようです・・・
hoshi-takanori

2022/04/15 16:56

うーん、これ以上は実際のコードを見てみないと何とも言えないですね。(プロジェクトが古かったら手直しが必要だったり、private ってことは特定の環境とか、他の private なツールやライブラリに依存してるのかも…。)
max123

2022/04/15 16:59

そうですよね・・・曖昧な質問にもかかわらずお答えくださり、どうもありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

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

アカウントをお持ちの方は

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問