TypeError: ConfettiGenerator is not a constructor

[akash-potdar7]

angular 5.2

[Agezao]

Hi there,

Can you give me more context about the error?
Steps to reproduce or even a jsfiddle with the behavior?

[akash-potdar7]

Steps:

1. install.
2. import.
3. include canvas in the template.
4. try using the confetti.
   var confettiSettings = { target: 'my-canvas' };
   var confetti = new ConfettiGenerator(confettiSettings);
   confetti.render();

[wallawe]

@akash-potdar7 I had the same issue and the following did the trick for me:

import 'confetti-js';

const ConfettiGenerator = window.ConfettiGenerator
const Confetti = new ConfettiGenerator({ target: id });
Confetti.render();

[Agezao]

I've a strong feeling that @wallawe solution do the job. Thanks for sugesting.

I'm going to close the issue. But if you stumble on the same problem again, feel free to re-open the issue with steps to reproduce and we can further discuss.

[JMLdev]

Yup, I came here with a similar issue of ConfettiGenerator not being defined in React. @wallawe's solution solved it for me. Thanks dude.

[interglobalmedia]

I had the same using vanilla JS, but not ES6 modules. It works fine, but I get the following error in the console:
main.js:28 Uncaught ReferenceError: ConfettiGenerator is not defined
at main.js:28

This is my code in my main.js file:

let confettiSettings = { target: 'my-canvas' };
let confetti = new ConfettiGenerator(confettiSettings);

And this is what I have in index.html for markup:

<canvas id="my-canvas"></canvas>
<script src="node_modules/confetti-js/dist/index.min.js"></script>
    <script src="scripts/js/main.js"></script>

Locally, I don't throw any errors. Only on gh-pages.

[interglobalmedia]

I fiexed the issue. I know this probably is a gh-pages specific issue. I simply grabbed the cdnjs which I found here:

https://www.jsdelivr.com/package/npm/confetti-js?path=examples

And placed it in the script tag in index.html above my own:

<script src="https://cdn.jsdelivr.net/npm/confetti-js@0.0.18/dist/index.min.js"></script>
    <script src="scripts/js/main.js"></script>

And now it works as it should. And then I removed the npm package since I no longer needed it.