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

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

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

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

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

React.js

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

Q&A

解決済

3回答

10354閲覧

Reactでアプリを立ち上げたい

ken0426

総合スコア34

Yarn

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

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

React.js

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

0グッド

0クリップ

投稿2021/10/26 11:01

編集2021/10/27 04:53

React アプリを立ち上げたい

ターミナルでcreate-react-app hello-reactを行い、アプリを作成しました。
その後、yarn startコマンドで立ち上げようとすると以下のエラーが発生しました。
自分なりに調べたのですが、解決できなかったため質問させていただきます。
(npm startなども試しましたが、アプリは起動できませんでした。)
####環境

  • node v17.0.1
  • Homebrew 3.3.0
  • yarn 1.22.17
  • yarn global add create-react-app 済み
  • macOS Catalina(10.15.7)

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

yarn run v1.22.17 $ react-scripts start node:internal/modules/cjs/loader:488 throw e; ^ Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: Package subpath './lib/tokenize' is not defined by "exports" in /Users/ken0426/portfolio/React/hello-react/node_modules/postcss-safe-parser/node_modules/postcss/package.json at new NodeError (node:internal/errors:371:5) at throwExportsNotFound (node:internal/modules/esm/resolve:416:9) at packageExportsResolve (node:internal/modules/esm/resolve:669:3) at resolveExports (node:internal/modules/cjs/loader:482:36) at Function.Module._findPath (node:internal/modules/cjs/loader:522:31) at Function.Module._resolveFilename (node:internal/modules/cjs/loader:919:27) at Function.Module._load (node:internal/modules/cjs/loader:778:27) at Module.require (node:internal/modules/cjs/loader:999:19) at require (node:internal/modules/cjs/helpers:102:18) at Object.<anonymous> (/Users/ken0426/portfolio/React/hello-react/node_modules/postcss-safe-parser/lib/safe-parser.js:1:17) { code: 'ERR_PACKAGE_PATH_NOT_EXPORTED' } Node.js v17.0.1 error Command failed with exit code 1. info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command. ユーザー名@自分のPC名 hello-react % code .

試したこと

  • 一度アプリを削除し作り直した
  • node、Homebrew、yarnなどのインストールをやり直した。

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

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

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

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

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

guest

回答3

0

解決方法

結論

  • nodeのバージョンを17.0.1から14.18.0に下げた。(※14.18.1でも問題ないと思います。)

###やり方(nodeのバージョンの下げ方)

①npm パッケージ n をグローバルインストール

Terminal

1sudo npm install -g n

②グローバルインストール済みパッケージの確認

Terminal

1npm list -g

③ダウングレード可能なバージョン情報を確認

Terminal

1n ls-remote --all

④ダウングレードをする

  • 今回は14.18.0にダウングレードする

Terminal

1sudo n 14.18.0

⑤ダウングレード実行後14.18.0に切り替わっているか確認をする

Terminal

1node -v

投稿2021/10/27 04:49

ken0426

総合スコア34

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

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

0

ベストアンサー

質問に

ターミナルで【create-react-app hello-react】を行い、アプリを作成しました。

その後、【yarn start】コマンドで立ち上げようとすると以下のエラーが発生しました。

とあるので、 create-react-app hello-react したあとに、すぐに yarn start したんじゃないかと思うのだけど、yarn startする前に、create-react-app で作られた hello-react ディレクトリに移動する、つまり、

shell

1cd hello-react

しないとだめですよ。

追記

当該のエラーが発生した後、rm -rf node_modules/rm -f yarn.lockしてから、yarn install して、 yarn start したところ、以下のような別のエラーが発生しました。

Starting the development server... /Users/kilesa/WebstormProjects/teratail/qa366330/node_modules/react-scripts/scripts/start.js:19 throw err; ^ Error: error:0308010C:digital envelope routines::unsupported at new Hash (node:internal/crypto/hash:67:19) at Object.createHash (node:crypto:130:10) at module.exports ・・・ opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ], library: 'digital envelope routines', reason: 'unsupported', code: 'ERR_OSSL_EVP_UNSUPPORTED' } Node.js v17.0.1 error Command failed with exit code 1. info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

これの原因と対策を調べてみると、すぐに見つかったのは以下です。

この記事曰く

Simplest and easiest solution is Just downgrade node to v14.18.1.

とのことで、node のバージョンを v14.18.1 に下げましょうとのことです。
ちなみに、React、フロントエンド周辺を業務でけっこうやってきましたが、その肌感覚で、すごくざっくりした言い方になりますが、

最新のものを組み合わせた場合、うまく動いたらラッキー(すんなり動かない方が当たり前)

ぐらいでいたほうが精神衛生上良いです。

投稿2021/10/26 12:56

編集2021/10/26 20:35
退会済みユーザー

退会済みユーザー

総合スコア0

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

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

ken0426

2021/10/26 13:57

ご回答ありがとうございます。 私の質問の仕方に誤りがありました。 【create-react-app hello-react】をしたあと cd コマンドで hello-react ディレクトリに移動しそこで【yarn start】を行いましたが、上記のエラーとなっております。
退会済みユーザー

退会済みユーザー

2021/10/26 20:02

ken0426さん コメントありがとうございます。そして失礼いたしました。当方のMac (OS 11.6) でも、ご質問の問題が再現されました。ちょっと調べて何か解決方法分かれば、また追記します。
ken0426

2021/10/27 00:18

追記の内容ありがとうございます。 やはり、nodeのバージョンを下げないとできないかもしれませんね。 nodeのバージョン落として試してみます。 アドバイス等ありがとうございます。
guest

0

同じ質問がStack Overflowにありました。

node_modulesフォルダと.lockファイルを削除してからパッケージを再インストールしたらNode 17.0.1でも動くようになった」とのこと。

その他にも「Nodeのバージョンをv14.18.1にしたら動いた」という報告もありますが、node_modulesが空だったためで、17.0.1でもnode_modulesなどを削除すれば再現するのではないかと思います。

reactjs - Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: Package subpath './lib/tokenize' is not defined by "exports" in the package.json of a module in node_modules - Stack Overflow

投稿2021/10/26 11:09

編集2021/10/26 12:59
fj68

総合スコア752

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

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

ken0426

2021/10/26 14:35 編集

ご回答ありがとうございます。 【node_modules】と【yarn.lock】のファイルを削除し、パッケージの再インストールを行いましたが、立ち上げることができませんでした。 # 試したこと - 【node_modules】と【yarn.lock】のファイルを削除 - これで起動できなかったためこの方法は断念 - 次に行ったのは【node_modules】はそのままに【node_modules】の中にあるファイルと【yarn.lock】のファイルを削除。【node_modules】フォルダは中身のない空のフォルダ。 - この状態でパッケージの再インストールを行ったが、これでも結果は変わらなかった。
fj68

2021/10/26 14:07

nodeのバージョンを安定版の14.18.1に変えてみるのはどうでしょうか。 もし現在Macにプリインストールされているnodeをお使いであれば、以下を参考にnodebrewをインストールしてnodeのバージョン管理するのをおすすめします。 今回のようにnodeのバージョンを切り替えるのが簡単にできますので。 Node.js を Mac にインストール(nodebrew の使い方) / Web Design Leaves https://www.webdesignleaves.com/pr/jquery/node_installation_mac.html とはいえ正直自分はMac環境ではないので問題が再現せず、上の回答に書いた以上のことはまだわかりません。 これから調べてみて、わかったことがあれば回答に追記しますね。
ken0426

2021/10/26 14:16

ありがとうございます。 nodeのバージョンを変えて実行してみます。 それでもうまくいかない場合は改めて質問内容を更新し「試したこと」に追記しておきます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問