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

Question

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などのインストールをやり直した。

Answer 1

解決方法

結論

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

###やり方（nodeのバージョンの下げ方）

• こちらの記事を参考にしたので詳しくはそちらをご覧ください

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

sudo npm install -g n

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

npm list -g

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

n ls-remote --all

④ダウングレードをする

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

sudo n 14.18.0

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

node -v

Answer 2

質問に

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

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

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

cd 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.

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

• [Solved] Failed to construct transformer: Error: error:0308010C:digital envelope routines::unsupported

この記事曰く

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

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

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

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

Comments

[ken0426]

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

[退会済みユーザー]

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

[ken0426]

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

Answer 3

同じ質問が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

Comments

[ken0426]

ご回答ありがとうございます。
【node_modules】と【yarn.lock】のファイルを削除し、パッケージの再インストールを行いましたが、立ち上げることができませんでした。

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

[fj68]

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]

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