I am hoping to alleviate some frustrations for others that I had with migrating my company’s Create React App to Node 16 and NPM 8. This was done by accident right before the holidays, which is never a good idea. The update nuked npm and caused a whole lot of bugs that bugged me all weekend (no pun intended…). We were running Node 10 and NPM 6.
Evidently NPM 7 and above introduced some breaking changes that changed some ways NPM handled peer dependencies. This caused
npm install to fail as different package were trying to install conflicting versions of their peer dependencies. This problem can be resolved by including
legacy-peer-deps=true in your .npmrc file.
Aside from a couple other unrelated errors, which were easy to resolve if the error trail was followed correctly, the below error took a while to resolve.
npm WARN tarball tarball data for eslint@http://tfs.[company_name]/tfs/[company]/_packaging/Default/npm/registry/eslint/-/eslint-7.32.0.tgz seems to be corrupted. Trying again. npm ERR! code Z_DATA_ERROR npm ERR! errno -3 npm ERR! zlib: invalid block type
After a day of troubleshooting me and another developer finally resolved the issue.
Step 1: Update React Scripts
We need to make sure Create React App is updated to the latest `react-scripts` so there are no compatibility errors with the newest Node and that we are making use of the latest features. This is just something that is always good to do. If you get some
eslint errors after the update follow this StackOverflow to resolve.
npm install --save --save-exact email@example.com
Fix any other errors that could follow a
Step 2: Update to the Latest NPM
So for some reason Node 16 LTS ships with NPM 8.1.0 and this version is actually what is causing the “Z_DATA_Error” at the top of the post. I HAVE NO CLUE WHY…. If anyone knows why this is causing issues, please post in the comments.
npm install -g npm@latest
This should install NPM 8.3.0 or later.
And tada the error should be gone. Dependencies should now install normally and no need to spend an entire day trying to figure this out.
For Those Running Build Servers like Azure Pipelines
More then likely if you are having these Node issues on your local machine you will be having the same issues on your build server as well. Node 16 will still install NPM 8.1.0 and throw the same errors when it does an
npm install as the project builds. You can explicitly install a later version of NPM after the Install Node step. Update or add the below snippet to your yml file in your project.
steps: - task: NodeTool@0 inputs: versionSpec: '16.x' displayName: 'Install Node.js' - task: Npm@1 inputs: command: custom customCommand: install npm@latest -g displayName: 'Update NPM'
This should fix your pipeline. For those that use different platforms, the steps are similar.
When updating to Node 16, make sure NPM is updated to the latest. Also, do not make major updates to a system right before the holidays…. Keep up with your build tool updates. The further removed from the newest version you get the harder it is to update later and easier for issues like the above to happen. Or… You could just update to Node 17 and bypass most of this. The choice is yours.
Have some better insight or feedback to this issue. Please comment below!