So, I was able to get this working after @OSUblake's suggestion to console.log out the plugins. Turns out placing the script in the HTML wasn't loading (React was resolving the wrong path even though the script and HTML live in the same directory...still haven't figured out why), so I expanded on @elegantseagulls' idea and created a custom hook called useScript to dynamically load the script in my component:
useScript.js:
import { useEffect } from 'react';
const useScript = url => {
useEffect(() => {
const script = document.createElement('script');
script.src = url;
script.async = true;
document.body.appendChild(script);
return () => {
document.body.removeChild(script);
}
}, [url]);
};
export default useScript;
Using hook in component:
import useScript from './hooks/useScript'
const TestComponent = () => {
// plugin lives in /public folder
useScript('/DrawSVGPlugin.min.js')
...
}
export default TestComponent
Now the script is loading and all is almost good. I'm having a pesky bug where the SVG animation doesn't work on the first render, but after clicking back then forward in the browser, it works perfectly. I'm pretty sure this is a state management issue on my end, so I'm going to restructure and test later. Will keep you posted on my results. Again, a sincere thanks to everyone for their input ?.