tsparticles / tsparticles

tsParticles - Easily create highly customizable JavaScript particles effects, confetti explosions and fireworks animations and use them as animated backgrounds for your website. Ready to use components available for React.js, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno, Solid, Riot and Web Components.
https://particles.js.org
MIT License
7.71k stars 847 forks source link

[Bug]: 167.js missing from cloudflare cdn #2329

Closed heatherduvall closed 3 years ago

heatherduvall commented 3 years ago

What happened?

I am trying use tsparticles from the Cloudflare CDN: https://cdnjs.cloudflare.com/ajax/libs/tsparticles/1.35.4/tsparticles.min.js but I am getting a 404 error for a file called 167.js

tsparticles.min.js:2 GET https://cdnjs.cloudflare.com/ajax/libs/tsparticles/1.35.4/167.js net::ERR_ABORTED 404

tsparticles still works on my project, i'm just getting that above error in the console.

I can fix it by including the following https://cdn.jsdelivr.net/npm/tsparticles@1.35.1/167.js but this is from a different source and with other plugins I am using in this project it would be ideal for me to have everything coming from the same cdn source.

Is it possible for this to be fixed for Cloudflare?

Version

1.34.5

Which library are you using?

jQuery (jquery-particles)

tsParticles Configuration

{
    "autoPlay": true,   
    "detectRetina": true,
    "duration": 0,
    "fpsLimit": 60,
    "interactivity": {
      "detectsOn": "canvas",     
      "modes": {
        "attract": {
          "distance": 200,
          "duration": 0.4,
          "easing": "ease-out-quad",
          "factor": 1,
          "maxSpeed": 50,
          "speed": 1
        },
        "bounce": {
          "distance": 200
        },
        "bubble": {
          "distance": 400,
          "duration": 2,
          "mix": false,
          "opacity": 0.8,
          "size": 40
        },
        "connect": {
          "distance": 80,
          "links": {
            "opacity": 0.5
          },
          "radius": 60
        },
        "grab": {
          "distance": 400,
          "links": {
            "blink": false,
            "consent": false,
            "opacity": 1
          }
        },
        "light": {
          "area": {
            "gradient": {
              "start": {
                "value": "#ffffff"
              },
              "stop": {
                "value": "#000000"
              }
            },
            "radius": 1000
          },
          "shadow": {
            "color": {
              "value": "#000000"
            },
            "length": 2000
          }
        },
        "push": {
          "default": true,
          "groups": [],
          "quantity": 4
        },
        "remove": {
          "quantity": 2
        },
        "repulse": {
          "distance": 200,
          "duration": 0.4,
          "factor": 100,
          "speed": 1,
          "maxSpeed": 50,
          "easing": "ease-out-quad"
        },
        "slow": {
          "factor": 3,
          "radius": 200
        },
        "trail": {
          "delay": 1,
          "pauseOnStop": false,
          "quantity": 1
        }
      },
      "events": {
        "onHover": {
          "enable": true,
          "mode": "attract"
        },
        "resize": true
      }
    },
    "manualParticles": [],
    "motion": {
      "disable": false,
      "reduce": {
        "factor": 4,
        "value": true
      }
    },
    "particles": {     
      "color": {
        "value": "#ffffff"        
      },
      "collisions": {
        "bounce": {
          "horizontal": {
            "random": {
              "enable": false,
              "minimumValue": 0.1
            },
            "value": 1
          },
          "vertical": {
            "random": {
              "enable": false,
              "minimumValue": 0.1
            },
            "value": 1
          }
        },
        "enable": true,
        "mode": "bounce",
        "overlap": {
          "enable": true,
          "retries": 0
        }
      },
      "move": {
        "angle": {
          "offset": 0,
          "value": 90
        },
        "attract": {
          "distance": 200,
          "enable": false,
          "rotate": {
            "x": 600,
            "y": 1200
          }
        },
        "decay": 0,
        "distance": {},
        "direction": "none",
        "drift": 0,
        "enable": true,

        "outModes": {
          "default": "out",
          "bottom": "out",
          "left": "out",
          "right": "out",
          "top": "out"
        },
        "random": false,
        "size": false,
        "speed": 2,
        "spin": {
          "acceleration": 1,
          "enable": false
        },
        "straight": false,
        "vibrate": false,
        "warp": false
      },
      "number": {
        "density": {
          "enable": true,
          "area": 100,
          "factor": 1000
        },
        "limit": 10,
        "value": 12
      },
      "opacity": {
        "random": {
          "enable": true,
          "minimumValue": 0.7
        },
        "value": 0.5,
        "animation": {
          "count": 0,
          "enable": true,
          "speed": 0.5,
          "sync": false,
          "destroy": "none",
          "startValue": "random",
          "minimumValue": 0.2
        }
      },
      "rotate": {
        "random": {
          "enable": true,
          "minimumValue": 90
        },
        "value": 0,
        "animation": {
          "enable": true,
          "speed": 3,
          "sync": false
        },
        "direction": "clockwise",
        "path": false
      },
      "shape": {
        "options": {
            "image": [
                {
                    "src": "../images/triangle-1.svg",
                    "width": 234,
                    "height": 66
                },
                {
                    "src": "../images/triangle-2.svg",
                    "width": 80,
                    "height": 80
                },
                {
                    "src": "../images/triangle-1.svg",
                    "width": 234,
                    "height": 66
                }
            ]
        },
        "type": "image"
      },
      "size": {
        "random": {
          "enable": false,
          "minimumValue": 50
        },
        "value": {
          "min": 50,
          "max": 100
        }

      }
    },
    "pauseOnBlur": true,
    "pauseOnOutsideViewport": true,
    "responsive": [],
    "themes": [],
    "zLayers": 100
  }

What browsers are you seeing the problem on?

Chrome

Relevant log output

GET https://cdnjs.cloudflare.com/ajax/libs/tsparticles/1.35.4/167.js net::ERR_ABORTED 404
a.l @ tsparticles.min.js:2
a.f.j @ tsparticles.min.js:2
(anonymous) @ tsparticles.min.js:2
a.e @ tsparticles.min.js:2
(anonymous) @ tsparticles.min.js:2
hn @ tsparticles.min.js:2
(anonymous) @ tsparticles.min.js:2
(anonymous) @ tsparticles.min.js:2
(anonymous) @ tsparticles.min.js:2
(anonymous) @ tsparticles.min.js:2
tsparticles.min.js:2 Uncaught (in promise) ChunkLoadError: Loading chunk 167 failed.
(error: https://cdnjs.cloudflare.com/ajax/libs/tsparticles/1.35.4/167.js)
    at Object.a.f.j (tsparticles.min.js:2)
    at tsparticles.min.js:2
    at Array.reduce (<anonymous>)
    at Function.a.e (tsparticles.min.js:2)
    at tsparticles.min.js:2
    at hn (tsparticles.min.js:2)
    at tsparticles.min.js:2
    at tsparticles.min.js:2
    at tsparticles.min.js:2
    at tsparticles.min.js:2

Code of Conduct

xscode-auto-reply[bot] commented 3 years ago

Thanks for opening a new issue. The team has been notified and will review it as soon as possible.

For urgent issues and priority support, visit https://xscode.com/matteobruni/tsparticles

matteobruni commented 3 years ago

Thanks for the report, I didn't notice this error on CDNjs. I'm going to update the package on their repo so it will be fixed in the next version.

That file anyway is a polyfill for the polygon mask feature (if you are not using it, it's not an issue)

https://github.com/cdnjs/packages/pull/867

matteobruni commented 3 years ago

I'm fixing this with webpack, so the filename will be included by default. The new file will be tsparticles-pathseg.js instead of 167.js