TypeError: svgPathSeg is undefined when using Polygon in Next.js

[darekaze]

Describe the bug When using tsparticles in Next.js, using polygon throws TypeError: svgPathSeg is undefined

My Typescript version is 3.9.7, the reproduction is made using js but still doesn't work either. This example codepen is used to reproduce the bug.

Next.JS output:

Unhandled Runtime Error

TypeError: svgPathSeg is undefined
Call Stack
parsePaths
node_modules/tsparticles/dist/Plugins/PolygonMask/PolygonMaskInstance.js (61:0)
parseSvgPath
node_modules/tsparticles/dist/Plugins/PolygonMask/PolygonMaskInstance.js (270:0)
downloadSvgPath/<
node_modules/tsparticles/dist/Plugins/PolygonMask/PolygonMaskInstance.js (284:0)
fulfilled
node_modules/tsparticles/node_modules/tslib/tslib.es6.js (71:41) 

To Reproduce Code sandbox

FYI. Removing polygon.data or polygon.url makes everything works again, but no more polygon.

Expected behavior

The component should render and does not throw runtime error.

Desktop:

• OS: Ubuntu 20.04
• Browser: Firefox
• Version: 79.0
• Typescript version: 3.9.7

[issue-label-bot[bot]]

Issue-Label Bot is automatically applying the label bug to this issue, with a confidence of 0.95. Please mark this comment with :thumbsup: or :thumbsdown: to give our bot feedback!

Links: app homepage, dashboard and code for this bot.

[matteobruni]

Hi @darekaze,

You were missing the pathseg library, that is mandatory for the polygon options.

With Next.js is a little bit tricky but I found a solution:

...const ParticleLogo = () => {

  /* added code start */
  if (process.browser) {
    require("pathseg");
  }
  /* added code stop */

  return (...

This should fix the issue.

I forked your codesandox to find a solution: https://codesandbox.io/s/crazy-stonebraker-f67ms?file=/pages/index.js

Hope it helps

[darekaze]

Ah, sorry I just notice the need of dependency for Polygon. Thanks for clarify!