create-react-app with pnpm

Note

CRA is dead. You can check alternatives to CRA in the official document such as Next.js, Remix and Gatsby. You can also use Vite too to start a React project.

---

pnpm: Fast, disk space efficient package manager

Recently, I've got to know about pnpm, and as a react developer, I've decided to have a first try with create-react-app.

---

1. Install pnpm

npm install -g pnpm

2. Create a React project using create-react-app.

pnpm create react-app pnpm-cra --template typescript

3. Delete node_modules, package-lock.json.

4. Install Packages using pnpm

pnpm install

There might've been an error like below.

hint: If you want peer dependencies to be automatically installed, add "auto-install-peers=true" to an .npmrc file at the root of your project.
hint: If you don't want pnpm to fail on peer dependency issues, add "strict-peer-dependencies=false" to an .npmrc file at the root of your project.

Let's take the hint.

Create a file .npmrc and added auto-install-peers=true, then remove node_modules and reinstall packages pnpm install.

5. Run a dev server

pnpm start

In my case, there was another error.

Property 'toBeInTheDocument' does not exist on type 'JestMatchers<HTMLElement>'.

I don't know exactly why it did happen though, it could've been solved by installing a type package.

pnpm add -D @types/testing-library__jest-dom

Then re-run the dev server!

---

That's it, I hope it will be helpful for someone.
Happy Coding!

Comments

[wimdenherder]

pnpm create react-app pnpm-cra --template typescript is still installing packages with yarn. Isn't there a direct command?

[SeongKuk Han]

The command is used to make a project with CRA.
You need to install packages using pnpm to change the package manager, then you don't need a yarn dependency file if you don't plan to use it.

[Mohammad Jawad (Kasir) Barati]

Thanks for the heads up about CRA's death 😂. I used Vite.

[SeongKuk Han]

I do Vite as well, Good choice man 👍

[alexander taylor]

Warning: create-react-app is deprecated!

I had a terrible time trying to get past that "toBeInTheDocument" error message in late 2023 only to realize I shouldn't be using create-react-app anyway.

[SeongKuk Han]

Yes, you're right.
React officially don't recommend CRA anymore.

---

Updated the post. Thanks for your comment.

[Imamuzzaki Abu Salam]

Very useful 💖

[SeongKuk Han]

I'm glad it helped :)

[Adiel Cohen]

Thank you so much!!!!
How can I change my shorter alias from "pnpm start" to "pn"?
The tutorial with Powershell for Windows in official pnpm website doesn't working...

[SeongKuk Han]

I'm glad, it helped :)

---

pnpm.io/installation#using-a-short...

In Powershell, type this for registering an alias.

set-alias -name pn -value pnpm

Then run a command pn start

[Oleh Devua]

Hello!
How do you think, why pnpm fails without pnpm add -D @types/testing-library__jest-dom?

[SeongKuk Han]

I think they're supposed to add the type package or include it in @testing-library. because, when I set up cra with yarn claasicthere istesting-library__jest-dominnode_modules/@typesand it works well, I'm not sure tho.
From what I know, they don't officially supportpnpm`. I'll make an issue about it in github. After I get a response from them, I'll re-comment it to you

[Mohammad Jawad (Kasir) Barati]

Any update?

I did not face it in the dev env while running pnpm start but I faced it in github actions. IDK why but I am trying different solution. Maybe I'll update you later on