Note
CRA is dead. You can check alternatives to
CRAin the official document such as Next.js, Remix and Gatsby. You can also useVitetoo 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!
Latest comments (11)
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.
Yes, you're right.
Reactofficially don't recommendCRAanymore.Updated the post. Thanks for your comment.
Very useful 💖
I'm glad it helped :)
pnpm create react-app pnpm-cra --template typescriptis still installing packages with yarn. Isn't there a direct command?The command is used to make a project with
CRA.You need to install packages using
pnpmto change the package manager, then you don't need a yarn dependency file if you don't plan to use it.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...
I'm glad, it helped :)
pnpm.io/installation#using-a-short...
In Powershell, type this for registering an alias.
Then run a command
pn startHello!
How do you think, why
pnpmfails withoutpnpm add -D @types/testing-library__jest-dom?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.pnpm`. I'll make an issue about it in github. After I get a response from them, I'll re-comment it to youFrom what I know, they don't officially support
Any update?
I did not face it in the dev env while running
pnpm startbut I faced it in github actions. IDK why but I am trying different solution. Maybe I'll update you later on