How to properly change from particles.js to react-tsparticles package

Viewed 34

Upgrading From react-particles-js to react-tsparticles-js


Hello everyone. So, I have my ReactJS website here. I use Netlify to deploy the build. Lately I keep getting the error code below. How would I go about switching from react-particles.js to the react-tsparticles.js package?

That is the only issue causing the error and failing to deploy. If there is anything else anyone notices, please let me know.

I have asked in the Netlify support forums, and the only answer I have gotten is this, which makes sense. But I am having trouble implementing the advice without causing more issues.


I did try using npm install --legacy-peer-deps but that does not work. I have researched this quite a bit before even posting to Netlify's support forum, and I can only find guides on how to add react-tsparticles-js, not upgrade or change from the depreciated one react-particles-js package.

Is it just as simple as removing the particles.js file or changing the import code?

My GitHub Repository: https://github.com/spragginsdesigns/reactportfolio Website: https://www.spragginsdesigns.com

I have spent quite a lot of time upgrading, fixing, and adding to my website and this is the only roadblock I have been having from deploying it.


Netlify Build Deploy Log:

8:12:06 PM: Installing NPM modules using NPM version 8.15.0
8:12:06 PM: npm WARN config tmp This setting is no longer used.  npm stores temporary files in a special
8:12:06 PM: npm WARN config location in the cache, and they are managed by
8:12:06 PM: npm WARN config     [`cacache`](http://npm.im/cacache).
8:12:06 PM: npm WARN config tmp This setting is no longer used.  npm stores temporary files in a special
8:12:06 PM: npm WARN config location in the cache, and they are managed by
8:12:06 PM: npm WARN config     [`cacache`](http://npm.im/cacache).
8:12:09 PM: npm ERR! code ERESOLVE
8:12:09 PM: npm ERR! ERESOLVE unable to resolve dependency tree
8:12:09 PM: npm ERR!
8:12:09 PM: npm ERR! While resolving: portfolio@0.1.1
8:12:09 PM: npm ERR! Found: react@18.2.0
8:12:09 PM: npm ERR! node_modules/react
8:12:09 PM: npm ERR!   react@"^18.2.0" from the root project
8:12:09 PM: npm ERR!
8:12:09 PM: npm ERR! Could not resolve dependency:
8:12:09 PM: npm ERR! peer react@"^16.0.0" from react-particles-js@3.6.0
8:12:09 PM: npm ERR! node_modules/react-particles-js
8:12:09 PM: npm ERR!   react-particles-js@"^3.6.0" from the root project
8:12:09 PM: npm ERR!
8:12:09 PM: npm ERR! Fix the upstream dependency conflict, or retry
8:12:09 PM: npm ERR! this command with --force, or --legacy-peer-deps
8:12:09 PM: npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
8:12:09 PM: npm ERR!
8:12:09 PM: npm ERR! See /opt/buildhome/.npm/eresolve-report.txt for a full report.
8:12:09 PM: npm ERR! A complete log of this run can be found in:
8:12:09 PM: npm ERR!     /opt/buildhome/.npm/_logs/2022-09-03T03_12_06_844Z-debug-0.log
8:12:09 PM: Error during NPM install
8:12:09 PM: Build was terminated: Build script returned non-zero exit code: 1
8:12:09 PM: Creating deploy upload records
8:12:09 PM: Failing build: Failed to build site
8:12:09 PM: Failed during stage 'building site': Build script returned non-zero exit code: 1 (https://ntl.fyi/exit-code-1)
8:12:09 PM: Finished processing build request in 10.952660972s
0 Answers
Related