CODEWITHSUNDEEP
javascriptgulpecmascript-6babeljs
TIJ
TIJ

Reputation: 3181

Object.assign is not a function

I'm using babel with gulp and create a simple DOM library in ES6. But after running and when i'm going to use it, I got the Object.assign is not a function in chrome console.

this is the gulp code

gulp.task('scripts', function() {
    return gulp.src(src + 'js/*.js')
      .pipe(babel())
      .pipe(concat('main.js'))
      .pipe(gulp.dest(dest + 'js'));
});

this is the class file

class DOM {
    constructor( selector ) {
        var elements = document.querySelectorAll(selector);

        this.length = elements.length;

        Object.assign(this, elements);
    }

    ...

}

const dom = selector => new DOM(selector);

and I'm using it in client side like dom('#elId');

Upvotes: 14

Views: 32486

Answers (2)

Amo Wu
Amo Wu

Reputation: 2517

  1. Install babel-core:

$ npm install babel-core --save-dev

  1. Import polyfill module into your js:

import 'babel-core/polyfill';

  1. Use babel to compile your code!

Upvotes: 13

Jacob Budin
Jacob Budin

Reputation: 10003

As I suspect you already know, Google Chrome uses V8, which supports ECMAScript 5th edition. Object.assign is introduced in ECMAScript 6th edition.

In order to use these additions, you need to include the ES6 polyfill provided by Babel:

This will emulate a full ES6 environment. [...]

Available from the browser-polyfill.js file within a babel-core npm release. This needs to be included before all your compiled Babel code. You can either prepend it to your compiled code or include it in a <script> before it.

Upvotes: 28

Related Questions