Grapesjs: GrapesJS does not work in IE11

[altalker]

GrapesJS does not work in IE11 as many of the JS function are not supported (e.g. remove().. , "`", blob.map..

[artf]

Can you show me exactly what kind of errors do you have?

[altalker]

1. 
   content: `

2. 

3. 
   

[altalker]

This is when I use IE 11 when items are dragged into the Canvas or using filestack. MS Edge it is ok. (JavaScript ECMA compatibility differences)

[artf]

thanks @altalker unfortunately, I'm not able to check those issues right now but hope to do so soon

[nicksav]

Actually have dnd broken on Edge as well.
Just doesn't work

[artf]

hey @nicksav can you post please your errors

[umangpasricha]

I am facing the same problem when using GrapesJs on IE11. Even http://grapesjs.com/demo.html is not working fine. I am getting these errors:

when I drag the components/blocks to the canvas(even before I drop them).

[artf]

I think it's clear that we have to add some polyfill for those methods, but at the moment, it's just not my priority (can't even test them properly), so... PRs are welcome

[arthuralmeidap]

@altalker wich Windows version are you using?

[umangpasricha]

I added polyfill for these methods and now it is working fine on IE too.
Here is the code I added for 'assign' method in the .js file I am using:

if (typeof Object.assign != 'function') {
Object.defineProperty(Object, "assign", {
value: function assign(target, varArgs) {
'use strict';
if (target == null) {
throw new TypeError('Cannot convert undefined or null to object');
}
var to = Object(target);
for (var index = 1; index < arguments.length; index++) {
var nextSource = arguments[index];
if (nextSource != null) {
for (var nextKey in nextSource) {
if (Object.prototype.hasOwnProperty.call(nextSource, nextKey)) {
to[nextKey] = nextSource[nextKey];
}
}
}
}
return to;
},
writable: true,
configurable: true
});
}

and here is the code I added before the use of 'matches' function in grapes.min.js:

if (!object.matches)
object.matches = object.msMatchesSelector || object.webkitMatchesSelector;

As IE does not support these methods so before using matches function in grapes.min.js, we are going to check if any object.matches method exists. If not then define object.matches with object.msMatchesSelector(this is supported by IE instead of matches).

[ateshuseyin]

@artf I can change babel presets with env preset. It should work with appropriate configuration. Or we can add babel-polyfill to this configuration

[artf]

Can anybody try the latest version (the demo is updated too) and report if you get errors in console?

[vishal5033]

@artf Can you please help me out. It is not working for me also. I have tried the demo , it is not working as well.
@umangpasricha if you have working copy of js which works in IE11 can you please send me?

[umangpasricha]

Yes, GrapesJS editor is working fine on Firefox, Chrome. IE11 and safari at my end. The changes I made in my code are:
In index file, I added the following code:

if (typeof Object.assign != 'function') {
Object.defineProperty(Object, "assign", {
value: function assign(target, varArgs) {
'use strict';
if (target == null) {
throw new TypeError('Cannot convert undefined or null to object');
}
var to = Object(target);
for (var index = 1; index < arguments.length; index++) {
var nextSource = arguments[index];
if (nextSource != null) {
for (var nextKey in nextSource) {
if (Object.prototype.hasOwnProperty.call(nextSource, nextKey)) {
to[nextKey] = nextSource[nextKey];
}
}
}
}
return to;
},
writable: true,
configurable: true
});
}

Then I made some changes in the grapes.min.js file. Here I am attaching this file as .txt:
grapesminjs.txt

[artf]

@vishal5033 do you see any error in console?
@umangpasricha what about the current demo (v0.12.25) in IE11? Can you tell me if you see any error

[umangpasricha]

@artf Yes I am getting the same error:

Object doesn't support property or method 'assign'

To resolve this I added the same code(mentioned above) in index.php file at my end.

[artf]

@ateshuseyin seems like babel-preset-env doesn't work as expected 🤔 or I'm missing something?

[ateshuseyin]

@artf I'm busy next 2 days but I will be look at as soon as possible

[NorthstarTech]

I m getting this error when I am running grapesjs with MJML in IE11
SCRIPT5007: Unable to get property 'plugins' of undefined or null reference
File: grapesjs-mjml.min.js, Line: 61790, Column: 1
I made the changes given by umangpasricha mentioned above. but still not working.
I am using the grapesJS latest version 0.12.30 and latest grapesmjml version 0.0.26
Please help me out to resolve this issue asap.
Thanks.

[ateshuseyin]

I fond the problem. I forgot to add babel-polyfill into project. So new js features was undefined in old browsers like Object.assign. fixed and sended a pull request #515.

So, are there any one who will test with IE. I am a mac user also.
You can test by http://grapesjs-ie-polyfill.surge.sh/

[vishal5033]

Hi @ateshuseyin
it is still giving error in IE11 as invalid character.

[ateshuseyin]

@vishal5033 It is only about demo page. I fixed and deployed. Could you try again please?

[vishal5033]

@ateshuseyin Sorry but now same old error "Object doesn't support property or method 'assign' ".

[ateshuseyin]

This is the last update I hope. I added babel-plugin-transform-object-assign into babel config and transform all Object.assign parts.

Could you try again? If won't I will find a windows machine

[vishal5033]

No problem. I will check. But again new error now. "Argument not optional"

[ateshuseyin]

ok. I will find a windows machine then fix this. It is too hard to fix with remote help.
@vishal5033 Thank for your help.

[vishal5033]

@ateshuseyin No problem. Welcome.

[tomichal]

Hey all, I guess this is already known, but the editor on the demo site, at http://grapesjs.com/demo.html, does not get initialized at all in MS Edge and IE 11.

[artf]

Thanks for the help @ateshuseyin, by the way, I was trying to use the library with babel-polyfill but unfortunately, keep getting this error in console only one instance of babel-polyfill is allowed. Obviously, the babel-polyfill is included once but seems like it conflicts with some other library and I believe this will happen with someone other, so I have to remove it from the next release.
Anyway, are you sure about using babel-polyfill in conjunction with babel-preset-env? Can't find anything about it https://github.com/babel/babel/tree/master/experimental/babel-preset-env :/

[tomichal]

Hey @artf is there a timeline for when MS Edge / IE 11 would be supported or nothing planned yet?

[artf]

@tomichal apologize but nothing planned

[tomichal]

No worries @artf
I'm trying to go through the Edge / IE errors and fix them in my project.
So far made a fix for an "... Argument not optional..." error.
This seems to make MS Edge happy enough for the editor to run without any more errors (not sure about IE 11 yet).
In case it would help others here is the code I added to my project (it needs to be added such that the browser gets it after the grapesjs JS code:

// 'detectIE()' sourced from https://codepen.io/gapcode/pen/vEJNZN
if (detectIE()) {
    var originalCreateHTMLDocument = DOMImplementation.prototype.createHTMLDocument
    DOMImplementation.prototype.createHTMLDocument = function (title) {
      if (!title) title = ''
      return originalCreateHTMLDocument.apply(document.implementation, [title]);
    }
}

[sura2k]

@tomichal Thanks, that worked. In IE 11 I had to replace dragHelper.remove() with dragHelper.parentNode.removeChild(dragHelper).

[NorthstarTech]

Where should I place this code of originalCreateHTMLDocument.... @sura2k @tomichal ? Can you please let me know the file name or correct position, so I can run this on IE explorer and MSEdge too. because I still get the error of not argument option. Thanks.

[tomichal]

@NorthstarTech there are a few ways to do that. You could for example place it inside a <script> tag at the end of your HTML page code, right before the closing </body> tag.

[NorthstarTech]

@tomichal I added in the script tag, The page is loading now, Thanks. but as I am using mjml with grapesjs, the following error is coming now on loading grapesjs with mjml. Help needed to fix this issue. I want to run grapesjs-mjml in IE11 and Edge too. Thanks.

[tomichal]

@NorthstarTech Are you hitting this errors in MS Edge and IE11 or only IE11?
From what I experienced, after adding that code snippet (if (detectIE()) ...) MS Edge worked fine and I didn't spend that much time debugging/fixing cases for IE11. I would like to make the editor work in IE11, but am currently working on other project.

[NorthstarTech]

I am experiencing the same error for both. I have used the fixes suggested in this thread. @artf Is there any additional work to be done in the grapejs-mjml.min,js?

[sura2k]

@NorthstarTech didn't check the above suggested fix with mjml, but without mjml it works. Tested on IE 11 and Edge 15.

[artf]

Sorry guys but still not able to work on this, any PR is welcome.
I'd create a new polyfill.js file here /src/utils and import it in /src/grapesjs/index.js

[vishal5033]

Hello All,
After some modifications, I am able to work grapesJS in IE11 also. I will post it here.

Thanks,

[NorthstarTech]

any update on IE11 issue with grapesmjml? GrapesJS is not working in IE11 and Edge with MJML. Can anyone help to fix this issue?
Thanks.

[artf]

@NorthstarTech I hope to fix this for the next release (this week). Did you find other errors in mjml plugin? (post them here)

[NorthstarTech]

@artf , I updated the grapesJS updated version of 0.12.55. I am getting these errors now when using with mjml.

[NorthstarTech]

@artf Is IE11 and Edge Issue also fixed with MJML?? I am still getting the above errors.

[artf]

@NorthstarTech it might be an issue with MJML itself

[NorthstarTech]

@artf is there any plan to fix this issue with mjml? Any timeline when this issue will be fix?

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.