CODEWITHSUNDEEP
javascriptreactjspnpm
pj1301
pj1301

Reputation: 43

PNPM - Starting new project not working as expected

I'm trying to use a centralised package manager (pnpm) instead of the vanilla npm, because, I like having space on my hard drive. I'm just trying to get the project started and running into difficulty and there is very little online to actually guide me through starting a project with this package manager. Does anyone have experience getting this to work for React/React Native?

Any ideas would be very welcome.

I've tried two different ways of setting this up:

I have used pnpm i server to see if I can get it working that way. Nothing. I'm relatively new to React, so I'm sure I've done something ridiculous, however regardless of how junior I am, I followed the official instructions and they haven't worked for me.

pnpm debug file says the following:

{
  "0 debug pnpm:scope": {
    "selected": 1,
    "workspacePrefix": null
  },
  "1 error pnpm": {
    "message": {
      "errno": 1,
      "code": "ELIFECYCLE",
      "pkgid": "[email protected]",
      "stage": "start",
      "script": "node server.js",
      "pkgname": "my-cv"
    },
    "err": {
      "name": "Error",
      "message": "[email protected] start: `node server.js`\nExit status 1",
      "code": "ELIFECYCLE",
      "stack": "Error: [email protected] start: `node server.js`\nExit status 1\n    at EventEmitter.<anonymous> (/usr/local/lib/node_modules/pnpm/lib/node_modules/@zkochan/npm-lifecycle/index.js:302:16)\n    at EventEmitter.emit (events.js:200:13)\n    at ChildProcess.<anonymous> (/usr/local/lib/node_modules/pnpm/lib/node_modules/@zkochan/npm-lifecycle/lib/spawn.js:55:14)\n    at ChildProcess.emit (events.js:200:13)\n    at maybeClose (internal/child_process.js:1021:16)\n    at Process.ChildProcess._handle.onexit (internal/child_process.js:283:5)"
    }
  }
}

UPDATE: So I've managed to get it to work, I think... I got hold of all of the required packages that are used in npx create-react-app and put them inside package.json before executing pnpm i. However, aside from wondering whether this is possible without going to that amount of trouble, looking at the file structure, in addition to the aliases I have inside the node_modules folder, I seem to have a hidden folder .registry.npmjs.org. This is exactly the same as the one I have in my system root, that I assumed was the central store.

TLDR: It appears that despite pnpm appearing to work (aliases are created inside the node_modules folder), I still have duplicate packages on my system. Can anyone confirm whether this is the case?

Upvotes: 3

Views: 6178

Answers (2)

Ade
Ade

Reputation: 669

Edited: August 2023

I've found a MUCH better way recently(ish), for instantiating React Typescript projects: Have a look at this repo in github: https://github.com/beenotung/create-react-ts-template

In short, just run the script from the README file, and you'll have a shiny new React project, with NONE of the NPM malarkey.

I guess if you insist on using vanilla JS, it wouldn't be hard to modify the template.

Original answer

I realise this is an old question now.... but it's still not adequately resolved (ideally, create-react-app should have a switch which allows it to use pnpm natively.... but that's for another day).

My solution is a bit tedious, but works. First, create your react app as normal:

pnpx create-react-app my-app --template typescript

Wait the requisite time for npm to download ~350mb of stuff you've already got. Next, run the following (assuming Linux):

cd my-app
rm -rf node_modules/
pnpm i

Depending on how many modules got re-used, you'll be saving up to 350mb of disk space.

Upvotes: 4

Zoltan Kochan
Zoltan Kochan

Reputation: 7646

Regarding disk space usage. The packages inside node_modules are hard links. pnpm has a section about this in the FAQ:

pnpm creates hard links from the global store to project's node_modules folders. Hard links point to the same place on the disk where the original files are. So, for example, if you have foo in your project as a dependency and it occupies 1MB of space, then it will look like it occupies 1MB of space in the project's node_modules folder and the same amount of space in the global store. However, that 1MB is the same space on the disk addressed from two different locations. So in total foo occupies 1MB, not 2MB.

For more on this subject:

Regarding the hidden folder inside node_modules, you can read in this article: Flat node_modules is not the only way.

pnpm used to have issues with React Native. pnpm uses symlinks a lot and React Native doesn't like symlinks.

P.S. if you don't get help on SO, you can always post to our Gitter chat

Upvotes: 1

Related Questions