Preact TypeError: Cannot read properties of undefined

[JuliaBonita]

Describe the bug

Data table loads ok, but paging through the data generates random preact freezing approximately every 1-20 clicks (sometimes the first page; sometimes other random pages) with this error:

preact.mjs:1 
       Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'is')
    at preact.mjs:1:6847
    at A (preact.mjs:1:7582)
    at E (preact.mjs:1:2155)
    at preact.mjs:1:7266
    at A (preact.mjs:1:7582)
    at E (preact.mjs:1:2155)
    at A (preact.mjs:1:6058)
    at E (preact.mjs:1:2155)
    at A (preact.mjs:1:6058)
    at E (preact.mjs:1:2155)

When that error occurs, the entire table freezes and the page must be hard-refreshed. On mobile, this causes the app to look like the entire screen has frozen, which makes the app useless for most users who don't know why the screen freezes.

Platforms:

• OS: Windows 10, 11, Android and Ubuntu Linux
• Browser: Chrome
• Version: Latest (103.0.5060.114)
• Framework: Svelte

Additional context

Maybe there is a way to mitigate this problem in my code, but since the data seems to load fine, there doesn't seem to be an obvious problem with my code. You can see the relevant parts below:

// Svelte
// I'm simply loading a local mapped array.
data = () => {
		return new Promise((resolve) => {
			setTimeout(
				() =>
					resolve(
						custList.map((obj: Customer) => {
							return [obj.custId, obj.nameFirst, obj.nameLast, obj.email, obj.phone, obj.createdOn];
						})
					),
				1000
			);
		});
	};

This problem makes the table grid feel very unstable; so it's scary to use it. Please help me resolve this problem as soon as possible.

[JuliaBonita]

I just noticed that the table also randomly freezes if I sort the columns multiple times quickly. So paging and sorting trigger the preact freeze problem, which seems to be a rendering problem, not a data loading problem. Given that preact is a rendering component, it seems like there is a bug in preact or in the way preact is implemented in GridJS.

[aloysb]

@JuliaBonita I'll take a look at this.

Any hints about recreating the issue? You are using local data and the table freezes when using pagination?

[JuliaBonita]

Hi, thank you for your reply. Yes, it was local data. It has been a while since I used the component. I had to switch to another solution over a month ago because I could not wait any longer. I'm not sure how to recreate the issue beyond the description I gave previously.

[aloysb]

No worries.

Well thanks for taking the time to report, I'll dig it out. There might be other users affected.

On Thu, Aug 18, 2022, 9:29 PM JuliaBonita @.***> wrote:

Hi, thank you for your reply. Yes, it was local data. It has been a while since I used the component. I had to switch to another solution over a month ago because I could not wait any longer. I'm not sure how to recreate the issue beyond the description I gave previously.

— Reply to this email directly, view it on GitHub https://github.com/grid-js/gridjs/issues/1056#issuecomment-1219380426, or unsubscribe https://github.com/notifications/unsubscribe-auth/AEHYZ4TLNFIALSZTFJU2RJ3VZYNCNANCNFSM53KQRVXQ . You are receiving this because you commented.Message ID: @.***>

[Parables]

I had a working version, but somewhere along the line, pages containing the grid started causing this error and I have no idea why this is happening.

In the pnpm-lock.yaml file the gridjs-svelte dependency was upgraded from gridjs-svelte: [email protected][email protected] to gridjs-svelte: [email protected][email protected]

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[engineersamwell]

This is a duplicate of #1341 which is still outstanding at the time of this writing.