Particles.js: Uncaught TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them

[alexmk92]

I have attempted to use particles.js in my application. I can confirm that the library is loaded, but when I attempt to initialise I get the error: Uncaught TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them.

HTML:

<div id="particle-layer"></div>

Javascript:

document.addEventListener( 'DOMContentLoaded', function () {
    particlesJS('particle-layer', {
        particles: {
            color: '#fff',
            shape: 'circle', // "circle", "edge" or "triangle"
            opacity: 0.5,
            size: 2,
            size_random: true,
            nb: 200,
            line_linked: {
                enable_auto: true,
                distance: 250,
                color: '#fff',
                opacity: 0.5,
                width: 1,
                condensed_mode: {
                    enable: true,
                    rotateX: 600,
                    rotateY: 600
                }
            },
            anim: {
                enable: true,
                speed: 2
            }
        },
        interactivity: {
            enable: false,
            mouse: {
                distance: 250
            },
            detect_on: 'canvas', // "canvas" or "window"
            mode: 'grab'
        },
        /* Retina Display Support */
        retina_detect: false
    });
}, false );

Any ideas as to why this error is being thrown? I have tried using the script with both npm the cdn and adding the script to my webpack build but the error is always consistent.

[alexmk92]

Okay, so I have done some reading and because my project is transpiling from ES6 it appears that I won't be able to use this module.

The problem is caused inside of Object.deepExtend:

Object.deepExtend = function(destination, source) {
    for (var property in source) {
        if (source[property] && source[property].constructor &&
            source[property].constructor === Object) {
            destination[property] = destination[property] || {};

         arguments.callee(destination[property], source[property]);

        } else {
            destination[property] = source[property];
        }
    }
    return destination;
};

If I try to remove the arguments.callee call the code compiles and nodes of 50x50px get rendered to the screen, however this is obviously not the desired behaviour. Is there a way to refactor this for ES6 so that it can be compiled or am I going to need to revert my project to ES5?

[adekbadek]

@alexmk92 - I had the same problem, seems that this lib is not ES6 compatible.
But you don't have to change the whole project, just create a separate Webpack entry for non-ES6 JS and transpile only .js.es6 (or whatever you like to call it) files via Babel. Regular .js will be bundled separately.

That's an additional HTTP request, yes, but if you want to use both ES6 and this library, I guess that's the way.

[headfire94]

@adekbadek use exclude in webpack config
{
test: /.js$/,
exclude: [
/node_modules/,
/particles.js/
],
loader: 'babel'
}

[Maplesog]

@headfire94 It's didn't work

[cenkai88]

you can rename the function in *_particle.js (line 1418) *_ so that it can work like this

Object.deepExtend = function testFunction(destination, source) { for (var property in source) { if (source[property] && source[property].constructor && source[property].constructor === Object) { destination[property] = destination[property] || {}; testFunction(destination[property], source[property]); } else { destination[property] = source[property]; } } return destination; };

[Saturate]

Thanks @cenkai88, here is the diff for people trying to understand. Had this issue when I used babel to compile.

-Object.deepExtend = function (destination, source) {
+Object.deepExtend = function deepExtendFunction(destination, source) {
  for (var property in source) {
    if (source[property] && source[property].constructor &&
     source[property].constructor === Object) {
      destination[property] = destination[property] || {}; 
-       arguments.callee(destination[property], source[property]);
+      deepExtendFunction(destination[property], source[property]);
    } else {
      destination[property] = source[property];
    }
  }
  return destination;
};

[awgeorge]

@Saturate Can you create a PR?

[Saturate]

@awgeorge done :-)

[podiumdesu]

I meet with the same problems and I tried very hard to solve it but it still doesn't work. @Saturate 's solution is really helpful!! And I modify particles.js with his method. And it works!! Thank you very much!

[bammoo]

Copy from https://stackoverflow.com/a/37166274/1252528

Babel 6 + es2015
We can disabled babel-plugin-transform-es2015-modules-commonjs to require babel-plugin-transform-strict-mode.

So comment the following code in node_modules/babel-plugin-transform-es2015-modules-commonjs/lib/index.js at 151 line

//inherits: require("babel-plugin-transform-strict-mode"),

[firestar300]

Thanks @Saturate :+1: it works now !

[darren-dev]

THis solution is from over a year ago, why hasn't it been included in a release?