Getting Error: Object doesn't support property or method 'assign'

Question

I am using this jquery popup plugin from this link on my WordPress site. It's working fine on all browsers but giving the following error on IE11.

@pragya, please put your some code so we can judge what is issue... my be it's is issue with dom element not found or have same id multiple time on page. — Haresh Vidja, Aug 16 '16 at 14:23

score 122 · Answer 1 · answered Aug 18 '16 at 14:51

As others have mentioned, the Object.assign() method is not supported in IE, but there is a polyfill available, just include it "before" your plugin declaration:

if (typeof Object.assign != 'function') {
  Object.assign = function(target) {
    'use strict';
    if (target == null) {
      throw new TypeError('Cannot convert undefined or null to object');
    }

    target = Object(target);
    for (var index = 1; index < arguments.length; index++) {
      var source = arguments[index];
      if (source != null) {
        for (var key in source) {
          if (Object.prototype.hasOwnProperty.call(source, key)) {
            target[key] = source[key];
          }
        }
      }
    }
    return target;
  };
}

From https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign

Test page: http://jsbin.com/pimixel/edit?html,js,output (just remove the polyfill to get the same error you're getting on your page).

Thank you! This works beautifully. I was having this exact problem with the Facebook Customer Chat widget, and applying this code just before FB's code did the trick. (For the one client who still insists upon using IE even though the rest of the world has moved on) — Alex Russell, May 14 '19 at 15:20
Something similar is available here https://www.npmjs.com/package/es6-object-assign -- I added it with npm install... and copied the automatic polyfill as suggested by `` — , May 14 '20 at 10:06

score 8 · Answer 2 · edited Feb 05 '18 at 08:07

@John Doe

I figured out from your comment that you want to implement this in node/react stack. This is very different from original question and you should have asked your own ;)
Anyways, Heres what you need to do...

You can use [es6-object-assign][1]. It is an ES6 Object.assign() "polyfill".

First, in package.json in your root folder, add es6-object-assign as a dependency:

"dependencies": {
    "es6-object-assign": "^1.0.2",
    "react": "^0.12.0",
    ...
  },

Then if you want to use it in node environment use:

require('es6-object-assign').polyfill();

If you are having the issue on front (browser) end...
Add it in your index.html file...

<script src="location_of_node_modules/es6-object-assign/dist/object-assign.min.js"></script>
<script>
  window.ObjectAssign.polyfill();
</script>

location_of_node_modules depends on boilerplate you use, mostly just node_modules, but sometimes when index.html is in a subdirectory you need to use, ../node_modules

score 7 · Answer 3 · edited Dec 21 '18 at 20:43

7

As per the documentation, Object.assign() is a new technology, part of the ECMAScript 2015 (ES6) standard:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign

And it is not supported by IE.

edited Dec 21 '18 at 20:43

faintsignal

1,828
3
22
30

answered Aug 15 '16 at 17:44

JGV

5,037
9
50
94

How do you implement a polyfill like https://www.npmjs.com/package/event-source-polyfill? In a node/react stack? – John Doe Aug 16 '16 at 04:08

aprovent · Answer 4 · 2016-08-19T17:11:28.393

6

A possible solution for this problem:

Add the script legacy.min.js before the custombox.min.js

source: custombox github project

edited Aug 19 '16 at 17:11

answered Aug 19 '16 at 14:31

aprovent

941
6
20

score 3 · Answer 5 · answered Aug 19 '16 at 20:14

@Andres-Ilich has the right answer to your question but you're asking the wrong question:

Why not just use a jQuery plugin that supports IE like Zurb's excellent Reveal: https://github.com/zurb/reveal

It will do everything you want and not throw this error.

score 3 · Answer 6 · answered Aug 20 '16 at 14:23

Currently working on a jQuery popup myself: https://github.com/seahorsepip/jPopup

Has everything you'd expect of a popup and more :D

Anyway back on topic, I'm currently writing version 2 which is a big rewrite and adds support for IE6 (version 1 was IE7+) and ran into a similiar error...

Original code that gave the error in IE6:

//Insane code for an insane browser
this._vars.fakeScrollbar = $("<div style=\"position:absolute;top:expression(document.documentElement.scrollTop);right:0;bottom:0;margin-left:-200px;width:0;overflow-y:scroll;height:expression(document.documentElement.clientHeight);z-index:9999999;\"></div>");

The hack I had to come up with:

//Insane code for an insane browser
this._vars.fakeScrollbar = $("<div>");
this._vars.fakeScrollbar.html("<div style=\"position:absolute;top:expression(document.documentElement.scrollTop);right:0;bottom:0;margin-left:-200px;width:0;overflow-y:scroll;height:expression(document.documentElement.clientHeight);z-index:9999999;\"></div>");
this._vars.fakeScrollbar = this._vars.fakeScrollbar.children();

score 3 · Answer 7 · answered Jan 04 '17 at 03:24

Since you tagged the question with jQuery you can use the jQuery extend function. No need for a polyfill and it does deep merge as well.

For Example:

var object1 = {
  apple: 0,
  banana: { weight: 52, price: 100 },
  cherry: 97
};
var object2 = {
  banana: { price: 200 },
  durian: 100
};

// Merge object2 into object1
$.extend( object1, object2 );

Result:

{"apple":0,"banana":{"price":200},"cherry":97,"durian":100}

score 3 · Answer 8 · edited Jul 04 '19 at 04:04

3

please add script

<script src="https://cdn.jsdelivr.net/npm/es6-object-assign@1.1.0/dist/object-assign-auto.min.js"></script>

to html file to resolved this problem.

edited Jul 04 '19 at 04:04

Bhargav Rao

50,140
28
121
140

answered Jul 04 '19 at 03:43

HoangDo

41
2

Worked like a charm on my ReactJS app in Laravel, thanks mate :) – Omer Mar 22 '21 at 12:55

score 2 · Answer 9 · edited May 23 '17 at 12:34

2

These error usually occurs when some html element id has the same id as some variable in the JavaScript function. After changing the name of one of them code worked.

Source : SCRIPT438: Object doesn't support property or method IE

Other link : jquery validation IE Object doesn't support property

edited May 23 '17 at 12:34

Community

1
1

answered Feb 05 '16 at 05:40

Milap

6,915
8
26
46

score 1 · Answer 10 · edited May 23 '17 at 11:47

Basically, Object.assign isn't supported by all browsers, however, it's possible to re-assign it at Object case it's not supported by the current browser.

It's pratice to make a polyfill function, which behaves in the same way as Object.assign(target, ...) of ES6.

I think the best solution is to iterate each argument after target, assign each property of arguments objects to target, considering a iteration between objects and arrays, to avoid creating references. Optionally, to not lost instances, you can detect if the last instance of the property is only equal to "Array" or "Object", and doing so you won't lost a Image interface (e.g) if you plan to create new references, but objects with these instances will still be reference.

Edit: the original Object.assign doesn't work in this way.

According to this solution, I've my own polyfill which can be found here.

score 0 · Answer 11 · answered Apr 03 '19 at 15:57

React solution for IE11

Regarding shramee's answer, which stated something like this:

@JohnDoe from your comment, you want to implement this in node/react stack. This is very different from the original question, but you might use es6-object-assign, an ES6 Object.assign() "polyfill":

This polyfill was updated and things can be done a bit differently now:

in package.json in your root folder, add es6-object-assign as a dependency (executing npm i in a command line after):
```
"dependencies": {
    "es6-object-assign": "^1.0.2",
    "react": "^16.8.6",
    ...
  },
```
Or simply run: npm i --save es6-object-assign

To use it in a node environment:

require('es6-object-assign').polyfill();
// Same version with automatic polyfilling
require('es6-object-assign/auto');

To use it in your index.html, just add the automatic polyfill JS file reference to it (if you have scripts in the <body> that invoke Object.assign() you may add it at the end of the <head> element).
1. Invoking directly from node_modules:
```
<script src="location_of_node_modules/es6-object-assign/dist/object-assign-auto.min.js"></script>
```
  location_of_node_modules depends on your project structure (when index.html is in a subdirectory you might need: ../node_modules).
2. However, this might have not worked for you (due to node_modules folders access, e.g. you are using create-react-app). If so, just copy the JS file from the dist/ node_modules folder to the public/ folder and then:
```
<script src="%PUBLIC_URL%/object-assign-auto.js"></script>
```
  You might want to use the non-minified file and add other customized polyfills (e.g. startsWith).

Getting Error: Object doesn't support property or method 'assign'

11 Answers11

React solution for IE11

Linked

Related