Receiving Uncaught ReferenceError: Vivus is not defined Webpack 4

[RailsCod3rFuture]

Greetings, I am using the latest npm package for Vivus -- I also imported Vivus into my application.js file for Webpack. When I tried to use the Vivus object in my script, it does not work & continue to receive an error. Can you please explain how to get your library functioning on Rails 6.0 with webpack 4?

application.js import Vivus from "vivus"; index.html.erb

<script>
$(document).ready(function(){
 new Vivus('contract-cloud', {duration: 200});
});
</script>

[maxwellito]

Hi there,

I must admit I never used this set up (Webpack 4 + Rails) but I'll try to help. Right now, Vivus is exported as UMD package. Have you tried import * as Vivus from "vivus"? Because it might be the right way. However, can you provide a console of the Vivus variable after importing it, to see what it contains? Also if you could please provide a copy of your error? It could be helpful (or any other details). Thanks

[RailsCod3rFuture]

Okay. I will report back tonight after work

[RailsCod3rFuture]

I added the statement as you described. The output in my console is below:

Vivus(element, options, callback) {
setupEnv(); // Setup
this.isReady = false;
....

Is this the desired results?

[RailsCod3rFuture]

In the index.html.erb page, I still receive Uncaught ReferenceError: Vivus is not defined. (after making the change the import statement)

[RailsCod3rFuture]

Okay, I attempted to move the logic out of the index page into the application.js file using a trick that worked before, and I receive no errors. But, the animation is not starting.

document.addEventListener('DOMContentLoaded', () => {
 const viv = new Vivus('contract-cloud', {duration: 200, type: 'delayed', animTimingFunction: Vivus.EASE})
});

<svg xmlns.....id="contract-cloud"...></svg>

[maxwellito]

Sorry I should have provided an example. I didn't ask to edit the source code of Vivus. Just display the object after importing it. Also

// Import Vivus
import * as Vivus from "vivus";

// See the content of the Vivus object
console.log('Vivus object:', Vivus);

// Wait for the page load of your page to start your animation
window.addEventListener('load', () => {
  const viv = new Vivus('contract-cloud', {
    duration: 200,
    start:'autostart',
    type: 'delayed',
    animTimingFunction: Vivus.EASE
  });
  console.log('Animation started', viv);
});

// ...then your HTML code
// <svg xmlns.....id="contract-cloud"...></svg>

Also do you mind testing your SVG in vivus-instant to test the compatibility. If your SVG isn't animated in it, it means your SVG isn't stroke based, so Vivus cannot animate it. You can also provide a copy on this issue if you don't mind sharing it.

[RailsCod3rFuture]

It may be a stroke compatibility issue -- I will re-open if its not. Thanks again. I purchased this particular svg on flaticon.com.