Particles.js: Uncaught TypeError: (0 , _particlesMin2.default) is not a function

[Necmttn]

I try to integrate with webpack to put my page but i having this error any idea why ?
if i give direct link it's working.
but with webpack + babel it's not.

[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

[calmdev]

You can fix the issue using webpack's exports loader:

npm install exports-loader --save-dev

Then add this to the root of your webpack config:

module: {
  loaders: [
    {
      test: /particles\.js/,
      loader: 'exports?particlesJS=window.particlesJS,pJSDom=window.pJSDom'
    }
  ]
}

Use it in your module:

import particles from 'particles.js'
particles.particlesJS.load('particles-js', 'assets/particles.json', function() {
  console.log('callback - particles.js config loaded');
});

[jaydenseric]

If you don't want the pollute your webpack config I managed to get this working:

import particles from 'exports?particlesJS=window.particlesJS,window.pJSDom!particles.js'

particles.particlesJS('my-id', { /* My config */ })

[Necmttn]

Thanks.

[nashwaan]

If you face error regarding DOM is not ready or document.getElementByClass is not a function error, then you can use the following workaround:

setTimeout(function() {
    particles.particlesJS('my-id', { /* My config */ });
}, 0);

I faced this issue when using Aurelia framework.

[wallaceturner]

following on from @calmdev reply - the format has changed in future versions of webpack

  loaders: [
    {
      test: /particles\.js/,
      loader: 'exports?particlesJS=window.particlesJS,pJSDom=window.pJSDom'
    }
  ]

becomes

rules: [
      {
        test: /particles\.js/,
         use: 'exports-loader?particlesJS=window.particlesJS,pJSDom=window.pJSDom'
      }
    ]

that is, there is no loaders section (moved to rules) and the loader field is replaced with use

see webpack ref for source