DEV Community 👩‍💻👨‍💻

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

Posted on

create-react-app with pnpm

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 (2)

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 Author • Edited on

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

Hacktoberfest is happening now!



It is a month-long celebration of open source. For a lot of devs, its their introduction to open source.


Check out the Hacktoberfest tag on DEV to keep up with the latest!