Cannot read property 'getElementsByTagName` of null

[Kempo]

Hey!

I believe there's an issue with the Polygon Mask feature. Whenever I try to display the polygon, I get the error: Uncaught (in promise) TypeError: Cannot read property 'getElementsByTagName' of null

I've included the pathseg polyfill in head of my index.html and I thought it was because my body hadn't loaded before the call yet (hence then null). So, I tried to draw the polygon after mounting (through the useEffect() hook). But, that doesn't work either. The same error occurs even after mounting.

I also know it is not a SVG path issue, because regardless of my SVG path, the error stays the same. Furthermore, I've tried loading the pathseg polyfill after the body tag in my index.html which doesn't work either.

Here's my current code which I call in my render() method of my component.

function ParticleView() {
  const [mounted, setStatus] = useState(false);

  useEffect(() => {
    setStatus(true);
  });

  return mounted ? (
    <Particles
      params={{
        polygon: {
          enable: true,
          type: 'inside',
          move: {
            radius: 10,
          },
          url: 'images/deer.svg',
        },
      }}
    />
  ) : (
    <h1>hello</h1>
  );
}

I've even tried downgrading to v2.4.0 to see if the error went away, but it's still occurred. I'm currently building on top of this React boilerplate git with minimal other libraries installed.

Any idea on what to do?

[wufe]

Is the path of the svg file publicly available and accessible? To avoid mistakes you should use an absolute path like ‘/public/images/deer.svg’

[Kempo]

@Wufe Fixed! I should have reread the README. My path was not publicly available through my URL, but once I made it so, everything worked!

Thank you!

[saschb2b]

I still get this error with just the blank example (no svg) in IE 11