DEV Community

Cover image for create-react-app with pnpm
SeongKuk Han
SeongKuk Han

Posted on • Updated on

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
Enter fullscreen mode Exit fullscreen mode

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

pnpm create react-app pnpm-cra --template typescript
Enter fullscreen mode Exit fullscreen mode

3. Delete node_modules, package-lock.json.

4. Install Packages using pnpm

pnpm install
Enter fullscreen mode Exit fullscreen mode

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.
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

In my case, there was another error.

Property 'toBeInTheDocument' does not exist on type 'JestMatchers<HTMLElement>'.
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Then re-run the dev server!


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

Top comments (11)

Collapse
 
wimdenherder profile image
wimdenherder

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

Collapse
 
lico profile image
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.

Collapse
 
imamdev_ profile image
Imamuzzaki Abu Salam

Very useful ๐Ÿ’–

Collapse
 
lico profile image
SeongKuk Han

I'm glad it helped :)

Collapse
 
alexsapps profile image
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.

Collapse
 
lico profile image
SeongKuk Han • Edited

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


Updated the post. Thanks for your comment.

Collapse
 
adielcohen profile image
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...

Collapse
 
lico profile image
SeongKuk Han • Edited

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
Enter fullscreen mode Exit fullscreen mode

Then run a command pn start

Collapse
 
olehdevua profile image
Oleh Devua

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

Collapse
 
lico profile image
SeongKuk Han • Edited

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 support
pnpm`. I'll make an issue about it in github. After I get a response from them, I'll re-comment it to you

Collapse
 
nodejsdeveloperskh profile image
node.js.developers.kh

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