npx で作った React プロジェクトを yarn でビルドする方法

高崎＠アノテーション　です。

はじめに

現在、React のサンプルプログラムを組んで演習しておりますが、演習に辺り詰まったことをブログの記事にいたしました。
同じような内容で躓かれている方がいらっしゃったらご参考になればと思います。

環境

• OS：Ventura 13.2.1
• Node：v18.4.2
• npm：9.5.0
• yarn：4.0.0-rc.40

前提条件

以下のようなコマンドを実行して React のプロジェクトを npx　で作成した場合、になります。

% brew install node
% npm install -g yarn
% npx create-react-app like-button --template typescript

発生現象

以下のようにこれを yarn でビルドした場合、当方の環境ではエラー画面が表示されました。

% yarn install
% yarn start

実行すると、下記のようなエラーポップアップが出ます。

対応

下記に情報が載っていましたが、以下のコマンドを実行することで表示可能になります。 https://stackoverflow.com/questions/57861187/property-tobeinthedocument-does-not-exist-on-type-matchersany

% npm i @testing-library/jest-dom --save-dev
% yarn install
% yarn start

エラー発生の原因

チーム内にこの内容を共有して「どうしてだろう？」と Slack で議論していたのですが、下記の情報を頂戴しました。

【React】「npx create-react-app」コマンドでyarnは使われなくなった

ここの本文にも記載の通り、2021年12月14日の以降 npx で作ったものは npm を使う ということで、yarn でビルドしたければ yarn でプロジェクトを作成するか必要なパッケージは　npm で取得する 必要があります。

閑話休題

もともと、この記事の発端は サバイバルTypeScript にあった この記事 を元に演習していて気づいたことですが、この件 GitHub の issue 報告済みです。

アノテーション株式会社について

アノテーション株式会社は、クラスメソッド社のグループ企業として「オペレーション・エクセレンス」を担える企業を目指してチャレンジを続けています。
「らしく働く、らしく生きる」のスローガンを掲げ、様々な背景をもつ多様なメンバーが自由度の高い働き方を通してお客様へサービスを提供し続けてきました。
現在当社では一緒に会社を盛り上げていただけるメンバーを募集中です。
少しでもご興味あれば、アノテーション株式会社WEBサイト をご覧ください。