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:
Created a new project with pnpx create-react-app my-app. This just did exactly what npx create-react-app would do, which includes installing over 200MB of modules I've already had on my system a million times over. I've checked the node_modules folder and none of the files are hard links, they are the modules themselves.
Created a new project without helper commands (i.e. touch App.js, index.js, index.html etc.) then pnpm i react... etc. This worked in a fashion, all of the node packages were links to my global store (in ~/), but then when I try pnpm start to get my server going, I get the error: Cannot find module ... /my-project/server.js. I do not have a server.js file, but then again, using regular npm and npx commands, I have never needed one.
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?
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