Hi all we are getting a new error with `AttributeFilterButto GoodData #gooddata-ui

Hi all, we are getting a new error with `Attribute...

Kyle Schutt

07/30/2024, 5:53 PM

Hi all, we are getting a new error with

AttributeFilterButton

on a nextjs webapp. On a client-side rendered page, if we add the element, then we get the following error. This does not happen if we add a

DateFilter

fwiw. While this works locally even with the error eventually, it does not pass the production build scripts because of this error. Any insight as to what might be causing this specific element to error out when building a custom UI?

Copy code

⨯ ReferenceError: document is not defined

✅ 1

Kyle Schutt

07/30/2024, 6:03 PM

https://github.com/kschutt/gd-attribute-filter-error

Kyle Schutt

07/30/2024, 6:03 PM

here is an example project showing the error

Kyle Schutt

07/30/2024, 6:14 PM

it fails in two scenarios: 1. loading the page 2. trying to do a production build but the date filter is fine

Radek Novacek

07/31/2024, 2:29 PM

Hi there Kyle, Radek from the GD Technical team, this has been brought to my attention - checking and will come back to you! 🙂

Kyle Schutt

07/31/2024, 2:49 PM

awesome, thank you!

Kyle Schutt

07/31/2024, 2:50 PM

hopefully the demo helps a bit

Radek Novacek

07/31/2024, 2:52 PM

Well, I did clone it and replaced the refs to point to my testing workspace and data, and besides React complaining about 'UNSAFE_componentWillReceiveProps in strict mode is not recommended', everything seems to be fine 😅

Kyle Schutt

07/31/2024, 2:52 PM

you were able to run

npm run build

without it throwing an error?

Radek Novacek

07/31/2024, 2:53 PM

ah right, build is unhappy, that's.. well, good news in this context 🙂

Kyle Schutt

07/31/2024, 2:54 PM

😅

Radek Novacek

07/31/2024, 2:55 PM

Ohh, I think it might be SSR-related, GD.UI doesn't actually support SSR - but still double-checking if I'm right!

Kyle Schutt

07/31/2024, 2:56 PM

yeah, thats why i have the

use client

and i am able to load the InsightView just fine too (there is another bug we discussed a few weeks ago about InsightView and nextjs using dynamic routes)

Kyle Schutt

07/31/2024, 3:00 PM

just you saying that reminded me of the fix

Kyle Schutt

07/31/2024, 3:00 PM

Copy code

import dynamic from 'next/dynamic';

const DateFilter = dynamic(() => import('@gooddata/sdk-ui-filters').then(mod => mod.DateFilter), {
  ssr: false
});

const AttributeFilterButton = dynamic(() => import('@gooddata/sdk-ui-filters').then(mod => mod.AttributeFilterButton), {
  ssr: false
});

Radek Novacek

07/31/2024, 3:00 PM

Just got to the same point, exactly!

Kyle Schutt

07/31/2024, 3:00 PM

need to use dynamic to ensure that SSR isn't used during nextjs build

Kyle Schutt

07/31/2024, 3:00 PM

haha great minds think alike!

Radek Novacek

07/31/2024, 3:00 PM

Was able to get it to build that way, yep 🙂

Kyle Schutt

07/31/2024, 3:01 PM

okay thank you!

Kyle Schutt

07/31/2024, 3:01 PM

sorry about that

Radek Novacek

07/31/2024, 3:01 PM

Oh no worries, happy to help Kyle!

3 Views

Open in Slack

Previous Next