Uncaught TypeError: _particlesMin2.default.load is not a function

[Necmttn]

Recently i start to try GulpStarter by Vigetlabs https://github.com/vigetlabs/gulp-starter for creating static pages. it uses webpack + Babel for JS tasks. i create a page and added theater.js scene(https://github.com/Zhouzi/TheaterJS) and it’s working pretty well. i also try to add Particles.js (https://github.com/VincentGarreau/particles.js/) but it’s not working :worried: my app.js file looklike this.

import theaterJS   from   './vendor/theater.min.js'
import particlesJS from   './vendor/particles.min.js'

// #######################  theaterJS ##############
var theater = theaterJS()

  theater
    .on('type:start, erase:start', function () {
      // add a class to actor's dom element when he starts typing/erasing
      var actor = theater.getCurrentActor()
      actor.$element.classList.add('is-typing')
    })
    .on('type:end, erase:end', function () {
      // and then remove it when he's done
      var actor = theater.getCurrentActor()
      actor.$element.classList.remove('is-typing')
    })

  theater
    .addActor('neco')

  theater
    .addScene('neco:cool', 400)
    .addScene('neco:beautiful', 400)
    .addScene('neco:responsive', 200, '.', 200, '.', 200, '. ')
    .addScene(theater.replay);

// PARTICAL JS

particlesJS("particles-js", {
    particles: {
        number: {
            value: 80,
            density: {
                enable: !0,
                value_area: 800
            }
        },
        color: {
            value: "#ffffff"
        },
        shape: {
            type: "circle",
            stroke: {
                width: 0,
                color: "#000000"
            },
            polygon: {
                nb_sides: 5
            }
        },
        opacity: {
            value: .5,
            random: !1,
            anim: {
                enable: !1,
                speed: 1,
                opacity_min: .1,
                sync: !1
            }
        },
        size: {
            value: 5,
            random: !0,
            anim: {
                enable: !1,
                speed: 40,
                size_min: .1,
                sync: !1
            }
        },
        line_linked: {
            enable: !0,
            distance: 150,
            color: "#fafafa",
            opacity: .37089939156716817,
            width: 1
        },
        move: {
            enable: !0,
            speed: 3,
            direction: "none",
            random: !1,
            straight: !1,
            out_mode: "out",
            bounce: !1,
            attract: {
                enable: !0,
                rotateX: 600,
                rotateY: 1200
            }
        }
    },
    interactivity: {
        detect_on: "canvas",
        events: {
            onhover: {
                enable: !0,
                mode: "grab"
            },
            onclick: {
                enable: !1,
                mode: "push"
            },
            resize: !0
        },
        modes: {
            grab: {
                distance: 191.80819180819182,
                line_linked: {
                    opacity: 1
                }
            },
            bubble: {
                distance: 400,
                size: 40,
                duration: 2,
                opacity: 8,
                speed: 3
            },
            repulse: {
                distance: 200,
                duration: .4
            },
            push: {
                particles_nb: 4
            },
            remove: {
                particles_nb: 2
            }
        }
    },
    retina_detect: !0
});

i also create this page in old way by directly linking js files to page. and it’s working.

in dev console i’m having this error.

app.js:31Uncaught TypeError: _particlesMin2.default.load is not a function

[greypants]

Looks like particles.js doesn't export a module. It just puts a global variable on window. You can do

import  './vendor/particles.min.js'

then window.particlesJS will be available.