Polyfills ERROR TypeError: Function.prototype.toString requires that 'this' be a Function at Boolean.toString (<anonymous>)

[roopeshkurian]

Describe the bug

I am trying to load a basic grid. But its showing the following error.

ERROR TypeError: Function.prototype.toString requires that 'this' be a Function
at Boolean.toString ()
at Boolean.f (polyfills.83bf772aef6d3363.js:1:19862)
at A.isPlainObject (9183.30ab7e6c5644b258.js:1:97553)
at A.extend (9183.30ab7e6c5644b258.js:1:98017)
at ae.mergeGridOptions (9183.30ab7e6c5644b258.js:1:884921)
at ae.initialization (9183.30ab7e6c5644b258.js:1:868204)
at ae.ngAfterViewInit (9183.30ab7e6c5644b258.js:1:865534)
at Gf (main.8220ccfd1ba21023.js:1:262994)
at Lm (main.8220ccfd1ba21023.js:1:263141)
at Zu (main.8220ccfd1ba21023.js:1:262899)
handleError @ main.8220ccfd1ba21023.js:1

Reproduction

Source code everything working fine. Publish the source and upload to AWS hosting or similar.

Expectation

There should not be any errors. It should display the grid.

Environment Info

angular 17.0.7
Angular Slickgrid 7.0.3
TypeScript 5.2.2
Browser Chrome, Mozilla

Validations

• Follow our Code of Conduct
• Read the HOWTO - Quick Start.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion.
• The provided reproduction is a minimal reproducible example of the bug.

[ghiscoding]

Cannot help without a full repro, this seems more like an AWS problem and unrelated to the project.

[roopeshkurian]

Everything was working well before. My last working version is angular-slickgrid 6.6.2
If I upgrade to any further I am getting this error.

[ghiscoding]

do you mean that you get this error with 6.6.3 as well?

I cannot replicate this, the GitHub Live Demo is built using a Production build and is working fine. It's really hard to do anything from my side, the best you can do is click on the console error and follow the stack trace with the error and see where the error is thrown. I'm not using Boolean.toString() anywhere in my code, so it must be in your code. debugging the stack trace would be helpful to do on your side. I still cannot help without a full repro

[roopeshkurian]

Yes, It's showing an error for the 6.6.3 , 6.6.6, and 7.0.3 versions.

Until 6.6.2 no issues. So I randomly checked a few higher versions. All were giving me the same error.
I am trying to create a demo project.

I am getting error from the following code . I did not write this code. As part of polyfills its coming from Zone file I guess

Zone.__load_patch("toString", e=>{
const n = Function.prototype.toString
, s = x("OriginalDelegate")
, c = x("Promise")
, l = x("Error")
, f = function() {
if ("function" == typeof this) {
const S = this[s];
if (S)
return "function" == typeof S ? n.call(S) : Object.prototype.toString.call(S);
if (this === Promise) {
const b = e[c];
if (b)
return n.call(b)
}
if (this === Error) {
const b = e[l];
if (b)
return n.call(b)
}
}
return n.call(this)
};
f[s] = n,
Function.prototype.toString = f;
const m = Object.prototype.toString;
Object.prototype.toString = function() {
return "function" == typeof Promise && this instanceof Promise ? "[object Promise]" : m.call(this)
}
}
);

[ghiscoding]

can you try to npm/yarn override the zone.js dependency? I know it's been updated from 0.13.x to 0.14.x not that long ago

[roopeshkurian]

I tried zone.js . It does not help

But I found an interesting thing.. Can you please check the below code? Its from the angular slick grid. I found that there is toString function used in the isPlainObject method. Could you please check.

initialization(m) {
if (this.gridOptions.translater = this.translaterService,
this._eventHandler = m,
this.gridOptions && (void 0 !== this.gridOptions.frozenRow && this.gridOptions.frozenRow >= 0 || void 0 !== this.gridOptions.frozenColumn && this.gridOptions.frozenColumn >= 0) && void 0 === this.gridOptions.enableMouseWheelScrollHandler && (this.gridOptions.enableMouseWheelScrollHandler = !0),
this._eventPubSubService.eventNamingStyle = this.gridOptions?.eventNamingStyle ?? x.siS.camelCase,
this._eventPubSubService.publish("onBeforeGridCreate", !0),
this._dataset = this._dataset || [],
this.gridOptions = this.mergeGridOptions(this.gridOptions),

mergeGridOptions(m) {
m.gridId = this.gridId,
m.gridContainerId = slickGridContainer-${this.gridId},
m.enablePagination = !(!m.backendServiceApi || void 0 !== m.enablePagination) || m.enablePagination || !1;
const _ = x.cQK.extend(!0, {}, yt, this.forRootConfig, m);

static extend(...e) {
let t, i, s, n, o, a, d = e[0], h = 1, u = !1;
const f = e.length;
if (!0 === d ? (u = d,
d = e[h] || {},
h++) : d = d || {},
"object" != typeof d && !A.isFunction(d) && (d = {}),
1 === f)
return e[0];
for (h === f && (d = this,
h--); h < f; h++)
if ((0,
g.isDefined)(t = e[h]))
for (i in t)
n = t[i],
"proto" !== i && d !== n && (u && n && (A.isPlainObject(n) || (o = Array.isArray(n))) ? (s = d[i],

 class gs extends Hs {
        constructor() {
            super(),
            this.__group = !0,
            this.level = 0,
            this.count = 0,
            this.value = null,
            this.title = null,
            this.collapsed = !1,
            this.selectChecked = !1,
            this.totals = null,
            this.rows = [],
            this.groups = null,
            this.groupingKey = null
        }
        equals(e) {
            return this.value === e.value && this.count === e.count && this.collapsed === e.collapsed && this.title === e.title
        }
    }
    class ft extends Hs {
        constructor() {
            super(),
            this.__groupTotals = !0,
            this.group = null,
            this.initialized = !1
        }
    }
    class A {
        static isFunction(e) {
            return "function" == typeof e && "number" != typeof e.nodeType && "function" != typeof e.item
        }
        static isPlainObject(e) {
            if (!e || "[object Object]" !== A.toString.call(e))

[ghiscoding]

there is a .toString() function but it's been there for a while already. Can you tell me which version of slickgrid and also which version of @slickgrid-universal/common is used between 6.6.2 and 6.6.3? I can check tomorrow what code change were applied between them to try to find the code that could cause the regression.

Looking at the compatibility table I created, it looks like v6.6.2 was using universal v3.6.0 and slickgrid v4.1.5, but I'm not sure about v6.6.3 since I didn't log that one in the table.

[roopeshkurian]

[email protected]
@slickgrid-universal/[email protected]
@slickgrid-universal/[email protected]

This is the last working version for me. Then I tried to upgrade to the latest. But I got the toString error. Then I downgraded to [email protected]
@slickgrid-universal/[email protected]
@slickgrid-universal/[email protected]
But no use. I am getting the same error there.

Just now I found that the following combination is working
[email protected]
@slickgrid-universal/[email protected]
@slickgrid-universal/[email protected]

There is no version available between 6.6.2 and 6.6.3 I guess.

[ghiscoding]

When you say the last working version, is it 6.6.2 or 6.6.6? I thought you said 6.6.2 earlier but I'm not sure anymore since your last comment. Please confirm what exactly is the last working version. If it's 6.6.2 then maybe try to npm override slickgrid dependency to 4.1.5 which was the version used in 6.6.2

Side note, that's the biggest change in v7, slickgrid external dependency is dropped, that's less dependency to take care of.

[roopeshkurian]

I am sorry for the confusion.

The last working version is

[email protected]
@slickgrid-universal/[email protected]
@slickgrid-universal/[email protected]

The latest version is not working for me.
[email protected]
@slickgrid-universal/[email protected]
@slickgrid-universal/[email protected]
For this combination I am getting the error mentioned above.

[ghiscoding]

does it work with 6.6.6? if not then I can see what changed between 6.6.5 and 6.6.6... but if it's only breaking after the next major 7.0, then I cannot help and need a full repro, there's just way too much code change internally to trace back the root cause and it's impossible to know without a full repro. I will say again, the best option for you is to either provide a full repro or troubleshooting it yourself by looking at the stack trace and adding breakpoints and/or disable some grid options or column definition props.

I also want to point out again that every single release, and PRs, are fully tested with Jest/Cypress and a Production build is run replaces the GitHub Live Demo every time a new release is pushed. The Prod build is also executed in every PR and is being used to run the Cypress E2E tests) and I don't see any errors on my side.

There must be some particular code on your side that adds these errors on your side (maybe your data or your column definitions or grid options)... so all that to say again that without a fully working repro I cannot provide much more help, the ball is in your court

[roopeshkurian]

AngularSlickgrid.zip

I have attempted various approaches, but none of them seem to be effective for me. As a result, I started a new Angular project and utilized basic grid coding, which is currently working when running from the source code. However, after publishing the project, the code is not working. Would it be possible for you to review it?
I would deeply appreciate your assistance.

[ghiscoding]

For security reason, I will not download neither execute a zip file. There are various other ways to share code, you can create a GitHub project (the easiest), or use JSFiddle, Stackblitz or anything similar. Or you could give me access to one of your AWS site as long as I could troubleshoot the stack trace.

However, I also mentioned multiple times that I already ran a Prod build and it is hosted on GitHub for the Live Demo and it is working fine for the 30 or so examples. At this moment I don't have access to other only website to test with.

[roopeshkurian]

I have uploaded to GitHub

https://github.com/roopeshkurian/AngularSlickgrid.git

[ghiscoding]

can you publish the dist to a GitHub Page, does it throw the error from there? If you've never done that then, it's similar to the Angular-Slickgrid demo like below but your branch should be main and the you should change the folder to the dist folder you have built which seems to be dist/angular-slickgrid/browser in your case

[roopeshkurian]

Sorry for wasting your time. When I tried to publish it gave me https://roopeshkurian.github.io/AngularSlickgrid/

I am unable to select the dist folder

Anyway thank you for your support I will keep on checking .

[ghiscoding]

I remembered that I recently started using Boolean(...) in the multiple-select-vanilla library and since Boolean() with .toString() shows up in your error, I decided to revert that code in there and use something that is probably more compatible (see PR ref shown above). I just published a patch version of multiple-select-vanilla at version 1.1.2. You could try to update it on your end, this might be the cause of your issue (I guess deleting your lock file would probably download the latest version).

For the SlickGrid libs, I'm only expecting to release another version them in a day or two, so up to you if you want to wait or give it a try earlier, there's a good chance that it would be related since that is the only place I found to be using the Boolean() syntax (and I probably won't anymore since that seems like an issue)

[roopeshkurian]

Thank you so much for solving it. I will use 1.1.2 now and test again.

Note: I tested version 1.1.2, but it still gave me the same error.

[ghiscoding]

There's at least another user who has the same problem displayed on Stack Overflow but again I cannot replicate this issue myself so I cannot provide any help. If any of you can provide a website where this occur then I can troubleshoot, but as it is now I cannot because I don't have that issue.

Are you sure that you're using the latest multiple-select-vanilla version and are you sure that the error is the same? Because after removing Boolean() from my external lib, I don't have any reference to Boolean() anywhere else, so can you confirm that it's the exact same error?

[roopeshkurian]

I am using the latest multiple-select-vanilla.

I uploaded the dist folder from https://github.com/roopeshkurian/AngularSlickgrid to the following location. You can see the error there.

http://roopeshkurian.s3-website.us-east-2.amazonaws.com/

[ghiscoding]

I have reimplemented the extend function that was previously used and shows up in your stack trace, the new implementation follows node-extend package which is a more proven package (it has millions of download each week), so hopefully this fixes your issue. So give this another try with v7.1.0 (don't forget to update all Slickgrid-Universal as well) and please tell me it works this time 🤞🏻

[ghiscoding]

looking back at the provided AWS website, it seems that the reimplementation of node-extend seems to have fixed your issue, finally 🎉 The other user also confirmed that it works now, so I guess we're all good now

[roopeshkurian]

Yes, it worked well. Thank you so much for your support.

[ghiscoding]

Thanks for confirming, happy holidays :)

[roopeshkurian]

Happy Holidays :-)