Compilation error: "Module not found: Can't resolve 'tsparticles'" after updating from 1.27.0 to latest 1.30.4

Which version are you using? 1.30.4

Is the latest version affected?

• Yes
• No

Which library are you using?

• Vanilla JS (tsparticles)
• React (react-tsparticles)
• Vue.js 2.x (particles.vue)
• Vue.js 3.x (particles.vue3)
• Angular (ng-particles)
• Svelte (svelte-particles)
• Preact (preact-particles)
• Inferno (inferno-particles)
• jQuery (jquery-particles)

tsParticles Configuration

{
  "particles": {
  	"number": {
  		"value": 80,
  		"density": {
  			"enable": true,
  			"value_area": 500
  		}
  	},
  	"color": {
  		"value": "#eebbc3"
  	},
  	"shape": {
  		"type": "circle",
  		"stroke": {
  			"width": 0,
  			"color": "#eebbc3"
  		},
  		"polygon": {
  			"nb_sides": 5
  		},
  		"image": {
  			"src": "img/github.svg",
  			"width": 100,
  			"height": 100
  		}
  	},
  	"opacity": {
  		"value": 0.5,
  		"random": true,
  		"anim": {
  			"enable": false,
  			"speed": 1,
  			"opacity_min": 0.1,
  			"sync": false
  		}
  	},
  	"size": {
  		"value": 3,
  		"random": true,
  		"anim": {
  			"enable": false,
  			"speed": 40,
  			"size_min": 0.1,
  			"sync": false
  		}
  	},
  	"line_linked": {
  		"enable": true,
  		"distance": 150,
  		"color": "#b8c1ec",
  		"opacity": 0.5,
  		"width": 1
  	},
  	"move": {
  		"enable": true,
  		"speed": 2,
  		"direction": "none",
  		"random": false,
  		"straight": false,
  		"out_mode": "out",
  		"bounce": false,
  		"attract": {
  			"enable": false,
  			"rotateX": 600,
  			"rotateY": 1200
  		}
  	}
  },
  "interactivity": {
  	"detect_on": "canvas",
  	"events": {
  		"onhover": {
  			"enable": true,
  			"mode": "repulse"
  		},
  		"onclick": {
  			"enable": true,
  			"mode": "push"
  		},
  		"resize": true
  	},
  	"modes": {
  		"grab": {
  			"distance": 400,
  			"line_linked": {
  				"opacity": 1
  			}
  		},
  		"bubble": {
  			"distance": 400,
  			"size": 40,
  			"duration": 2,
  			"opacity": 8,
  			"speed": 3
  		},
  		"repulse": {
  			"distance": 200,
  			"duration": 0.4
  		},
  		"push": {
  			"particles_nb": 4
  		},
  		"remove": {
  			"particles_nb": 2
  		}
  	}
  },
  "retina_detect": true
}

Describe the bug I was using 1.27.0 and everything was working fine, I updated using npm update and now my version is 1.30.4 and I am seeing below error on npm run start. PS. this app is created using create-react-app with default config.

D:\React\We-Were-Here>npm run start

> we-were-here@0.1.0 start D:\React\We-Were-Here
> react-scripts start

i ｢wds｣: Project is running at http://172.21.160.1/
i ｢wds｣: webpack output is served from /We-Were-Here
i ｢wds｣: Content not from webpack is served from D:\React\We-Were-Here\public
i ｢wds｣: 404s will fallback to /We-Were-Here/
Starting the development server...
Failed to compile.

./node_modules/react-tsparticles/cjs/particles.js
Module not found: Can't resolve 'tsparticles' in 'D:\React\We-Were-Here\node_modules\react-tsparticles\cjs'
Compiling...
Failed to compile.

./node_modules/react-tsparticles/cjs/particles.js
Module not found: Can't resolve 'tsparticles' in 'D:\React\We-Were-Here\node_modules\react-tsparticles\cjs'

To Reproduce Steps to reproduce the behavior:

1. Clone this repo.
2. Run npm install.
3. Run npm run start
4. Everything is working fine as react-tsparticles version is 1.27.0.
5. Now run npm update, react-tsparticles gets updated to version is 1.30.4.
6. Run npm run start.
7. Observe the error in console.

Expected behavior Compilation should be successful and the webpage should be visible.

Screenshots

Desktop:

• OS: Windows 10
• Browser: MS Edge
• Version: 91.0.864.64

Smartphone (please complete the following information): Not tried

[ShivamS136]

OK, Thanks @matteobruni, I’m closing it here. I hope npm i tsparticles was the right command to fix my issue which I performed. 😃

[matteobruni]

The actual version is not gonna change, I prefer the peerDependency since the components will be more Indipendent, it’s a minor change since the main library is installed anyway, in one case automatically and in the other manually. The ”tsparticles” import could happen sometimes since it has some additional exports that could help sometimes so it’s already there