Giters

dvtng / react-loading-skeleton

Create skeleton screens that automatically adapt to your app!

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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

rohit-rautt opened this issue · comments

commented

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

Screenshot 2023-04-21 at 9 53 53 AM

Screenshot 2023-04-21 at 9 54 04 AM

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
commented

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.

commented

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 -

image

When error occurs - check the value of G

image

when thing works fine

Screenshot 2023-04-24 at 2 51 37 PM

commented

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.

commented

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.