TypeError: Property description must be an object: count at defineProperties

dvtng / react-loading-skeleton

Create skeleton screens that automatically adapt to your app!

MIT License

3.96k stars 159 forks source link

TypeError: Property description must be an object: count at defineProperties #184

Closed rohit-rautt closed 1 year ago

rohit-rautt commented 1 year ago

I'm getting below type error intermittently while using react skeleton loading in production. Unable to reproduce with dev build

To Reproduce It happens intermittently on page refresh or while navigating within app

Actual Behavior Page breaks with the console error mentioned above

Expected Behavior

Versions

react-loading-skeleton - 3.1.0
Browser version: chrome latest

srmagura commented 1 year ago

Hi @rohit-rautt, it is difficult to debug this issue with the information provided. Are you able to provide a minimal repro of the issue that I can run?

I do not think this is a react-loading-skeleton issue, since the error is coming from Object.defineProperties, and our code does not contain any calls to this function.

My one observation that may be useful is that it appears that your build process is transpiling the react-loading-skeleton code to target a lower ECMAScript version. This could be the source of the error. Normally, your build process would bundle a library's code, but not transpile it.

rohit-rautt commented 1 year ago

This is what i have observed Post transpilation this is converted to a function named 'G' and this var G clashes intermittently with defineProperties func

transpilation of above reference code -

When error occurs - check the value of G

when thing works fine

srmagura commented 1 year ago

Nice job debugging that. As I said before, this seems like a problem with how your project is transpiling and minifying the react-loading-skeleton code.

rohit-rautt commented 1 year ago

We were able to resolve the issue 😄 . It seems that the problem was related to using different versions of JavaScript (ES) in our application.

Here's a breakdown of the steps we took to resolve the issue:

we were using the package react-skeleton-loading version 3.1.0 in our application.
The code published by react-skeleton-loading was in ES2018 (ECMAScript 2018) format.
our app, on the other hand, was built and minified targeting ES2015 (ECMAScript 2015).
To ensure compatibility and resolve the issue, we minified react-skeleton-loading to ES2015 format.
By aligning the ES versions between your app and the react-skeleton-loading package, we were able to resolve the issue.
This ensured that the code in both components could be interpreted correctly by the JavaScript engine.