Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
5 tasks done
roopeshkurian opened this issue Dec 19, 2023 · 25 comments · Fixed by #1337

Comments

@roopeshkurian
Copy link

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

@ghiscoding
Copy link
Owner

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

@roopeshkurian
Copy link
Author

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
Copy link
Owner

ghiscoding commented Dec 19, 2023

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
Copy link
Author

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
Copy link
Owner

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
Copy link
Author

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
Copy link
Owner

ghiscoding commented Dec 19, 2023

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
Copy link
Author

roopeshkurian commented Dec 19, 2023

angular-slickgrid@6.6.2
@slickgrid-universal/common@3.6.0
@slickgrid-universal/excel-export@3.6.0

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 angular-slickgrid@6.6.6
@slickgrid-universal/common@3.7.2
@slickgrid-universal/excel-export@3.7.2
But no use. I am getting the same error there.

Just now I found that the following combination is working
angular-slickgrid@6.6.5
@slickgrid-universal/common@3.7.2
@slickgrid-universal/excel-export@3.7.2

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

@ghiscoding
Copy link
Owner

ghiscoding commented Dec 19, 2023

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
Copy link
Author

I am sorry for the confusion.

The last working version is

angular-slickgrid@6.6.5
@slickgrid-universal/common@3.7.2
@slickgrid-universal/excel-export@3.7.2

The latest version is not working for me.
angular-slickgrid@7.0.3
@slickgrid-universal/common@4.0.3
@slickgrid-universal/excel-export@4.0.3
For this combination I am getting the error mentioned above.

@ghiscoding
Copy link
Owner

ghiscoding commented Dec 19, 2023

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
Copy link
Author

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
Copy link
Owner

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
Copy link
Author

I have uploaded to GitHub

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

@ghiscoding
Copy link
Owner

ghiscoding commented Dec 20, 2023

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

image

@roopeshkurian
Copy link
Author

Sorry for wasting your time. When I tried to publish it gave me https://roopeshkurian.github.io/AngularSlickgrid/
image
I am unable to select the dist folder
image

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

ghiscoding added a commit to ghiscoding/multiple-select-vanilla that referenced this issue Dec 20, 2023
- I'm not sure if it's related or not but this Angular-Slickgrid issue came up with this error so I wonder if this could help to use older code that is more compatibile
```ts
Function.prototype.toString requires that 'this' be a Function at Boolean.toString
```
ghiscoding/Angular-Slickgrid#1334
@ghiscoding
Copy link
Owner

ghiscoding commented Dec 20, 2023

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
Copy link
Author

roopeshkurian commented Dec 20, 2023

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
Copy link
Owner

ghiscoding commented Dec 20, 2023

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?

ghiscoding added a commit to ghiscoding/slickgrid-universal that referenced this issue Dec 20, 2023
the `extend` function that was added to SlickGrid core utils seems to be causing problems when Angular-Slickgrid are published on external website as per this issue: ghiscoding/Angular-Slickgrid#1334
- the node-extend came from this popular npm package: https://github.com/justmoon/node-extend/blob/v1.2.0/test/index.js
the reason, I reimplemented it in here is because the npm package is using old CJS syntax and is not ESM friendly, moving the code in here would be better with newer syntax and less CJS code, also less external dependencies
@roopeshkurian
Copy link
Author

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 added a commit to ghiscoding/slickgrid-universal that referenced this issue Dec 21, 2023
* feat(utils): replace slick-core extend utils with `node-extend`
the `extend` function that was added to SlickGrid core utils seems to be causing problems when Angular-Slickgrid are published on external website as per this issue: ghiscoding/Angular-Slickgrid#1334
- the node-extend came from this popular npm package: https://github.com/justmoon/node-extend/blob/v1.2.0/test/index.js
the reason, I reimplemented it in here is because the npm package is using old CJS syntax and is not ESM friendly, moving the code in here would be better with newer syntax and less CJS code, also less external dependencies

* chore: replace all previous slickcore extend with node-extend
ghiscoding added a commit that referenced this issue Dec 21, 2023
- fixes #1332, #1333
- possibly (and hopefully) fixes #1334 by using the new reimplementation of node-extend that is used for merging grid options and other sections of Slickgrid-Universal object merging & extending
@ghiscoding
Copy link
Owner

ghiscoding commented Dec 21, 2023

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
Copy link
Owner

ghiscoding commented Dec 21, 2023

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
Copy link
Author

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

@ghiscoding
Copy link
Owner

Thanks for confirming, happy holidays :)

@roopeshkurian
Copy link
Author

Happy Holidays :-)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants