3

I am seeing a weird behaviour with package-lock.json. Once I remove node_modules and package-lock.json and then build them, my application works as expected. When I do a npm install again with just built package-lock.json existing, the file entirely changes removing lot of packages from the tree. When I run the server now, certain Modal (from react-bootstrap ) components don't work properly. I don't understand why this file should change and end up installing different version of dependencies which is breaking the code. Am I doing something wrong with regards to package-lock.json?

Every time I remove both node_modules and this file and build I don't face any issue. Only when this file is already present and I do npm install I run into issues.

Matt Croak
  • 2,788
  • 2
  • 17
  • 35
Oliver Blue
  • 677
  • 2
  • 9
  • 22
  • 2
    are your own dependencies using the latest versions available? The package-lock.json is a dependency graph, and if some of your packages are "older", then you'll have "older" nodes pointing to requiring "older" dependencies, which may have breaking changes, if you have a newer version of a "post-break" dependency installed at the "top" - your package.json – Stephen Collins Nov 08 '19 at 15:56
  • Why should package lock json be different if I build it on the one just created after removing node modules? When I nuke node modules and package lock and then build everything works as expected – Oliver Blue Nov 08 '19 at 16:13
  • have you tried `npm ci` ? – Alireza Nov 08 '19 at 16:23
  • I made sure there were no conflicts using npm ci. But a subsequent npm install is removing a whole lot of packages in the package-lock.json. – Oliver Blue Nov 08 '19 at 19:05
  • 2
    Just to clarify, here is sequence of commands: 1. rm -rf node_modules && rm package-lock.json 2. npm install 3. Start server 4. Everything works as expected 5. npm install (again) 6. package-lock.json is completely different(lot of packages removed and on starting server now, Modal doesnt work as expected. – Oliver Blue Nov 08 '19 at 19:05

2 Answers2

2

npm install creates a new package-lock.json whenever you update node_modules i.e when you install a new module/package. So the overriding of the pre-existing package-lock.json is expected behavior.

As for the Modal breaking it is likely because of version conflict. If you post the 'break' error we could better determine what's causing it but this usually happens when you're packages require a certain version of another dependency.

A possible solution would be to delete node_modules and the original package-lock.json file and then run install. You can also try npm ci.

EDIT

This link might be helpful in giving you more insight into package-lock.json files and how they are affected by npm install. Essentially, once lock file has been generated, it avoids updating to newer versions - until you edit package.json to specify a different version or range. Whatever you're trying to install you should do it from the command line.

Matt Croak
  • 2,788
  • 2
  • 17
  • 35
  • The error on opening modal is Cannot read property getDialogElement of undefined. Close button doesnt work saying Cannot read property remove of undefined. – Oliver Blue Nov 08 '19 at 16:21
  • I am doing what you mention in last para. But then when I do npm install again, the file changes and modal breaks – Oliver Blue Nov 08 '19 at 16:22
  • Can you post the code for your Modal component? Are you using ES6? What package are you trying to install? – Matt Croak Nov 08 '19 at 16:23
  • ``` hideModal()} centered> Create Box ``` Using modal from react-bootstrap. I am not sure what package is breaking it. This was perfectly working code started breaking after package-lock.json was committed. – Oliver Blue Nov 08 '19 at 19:03
  • Added more details in comments section of question – Oliver Blue Nov 08 '19 at 19:07
0

npm install changes the packages.json and package-lock.json because it tries to install newer versions of dependencies. If you don't want this and wish to leverage package-lock.json and leave packages.json as is, try npm ci.

Alireza
  • 10,237
  • 6
  • 43
  • 59
  • 1
    I am running it immediately after its built (2nd run is changing it) without any scop of new packages – Oliver Blue Nov 08 '19 at 18:59
  • More detilas in comments section of question – Oliver Blue Nov 08 '19 at 19:08
  • 1
    @OliverBlue Aah ok! One possibility is that a second level dependency i.e dependency of a dependency of a...of a package you've included in your `packages.json` is not locked in a fixed version by its author. If for the second round of install you use `npm ci` this problem never occurs. – Alireza Nov 08 '19 at 20:56