DataViews: Component crashes on interaction with UI

[ryanwelcher]

Description

I have an admin page that is using the <DataViews /> component. The code is based on the this Developer Blog article.

On initial load, the there are a large number of console errors for JSX elements returning undefined and then when clicking on any of the controls, the app crashes with more errors.

I have tested this and it only occurs with version 4.3.0 of the package but 4.2.0 works as expected. This also occurs in repo related to the article

Step-by-step reproduction instructions

Checkout the developer blog repos and install it:

1. git clone git@github.com:wptrainingteam/devblog-dataviews-plugin.git
2. cd devblog-dataviews-plugin
3. npm i
4. npm run build
5. npx @wp-now/wp-now start

Navigate to Media->Add Media from third party service

Screenshots, screen recording, code snippet

https://github.com/user-attachments/assets/e1ccaf37-f66a-455b-a7fe-04959d5598b0

Environment info

• WordPress 6.6.1
• Node version: v20.17.0
• Mac OS 14.6.1
• Google Chrome

Please confirm that you have searched existing issues in the repo.

• [X] Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

• [X] Yes

[ryanwelcher]

cc @juanmaguitar @oandregal

[oandregal]

@ryanwelcher I've setup the devblog-dataviews-plugin, modified package.json to use dataviews 4.3.0, and I can see an error upon clicking any control.

I don't have much time to look at this today, but wanted to ask if you could provide instructions to use the devblog-dataviews-plugin with unminified React (I've tried using npm run start but it didn't help).

https://github.com/user-attachments/assets/8cdf09e0-a420-4b3c-96d8-54228832e03e

---

The video in the OP is a different example. Based on the console messages, the issues there may be different: I'd think your fields aren't getting proper labels/headers as React elements. Happy to take a look if setup instructions are provided.

[louwie17]

@gigitux and I were getting similar errors but with version 4.2.0 ( haven't tried 4.3.0 yet ). We found out that the reason is that dataviews relies on @wordpress/components and DropdownMenuV2 component, its exports have recently changed, see this PR: https://github.com/WordPress/gutenberg/pull/64654

We were seeing the error in 4.2.0 when running it against GB trunk, using GB 19.1 worked for example. I am guessing you are seeing it in 4.3.0 because you are not running GB trunk and running the newer Dataviews package relying on the new DropdownMenuV2 exports, while the site still bundles the old one. This should get fixed if you run it against GB trunk or wait until GB 19.2 is released.

In summary the error should dissipate if you run:

• Dataviews 4.2.0 and older with GB 19.1 and older ( or don't have GB installed )
• Dataviews 4.3.0 and GB trunk or 19.2 and newer ( 19.2 should get released soon ).

[ryanwelcher]

Thanks for the follow up here. This makes sense to me.

[oandregal]

For awareness, there's a related slack thread about this.

The TLDR is: the issue is not DataViews, but how it's bundled in a WordPress environment. When one of its dependencies (@wordpress/components, for example) have differences between what DataViews declared and what the environment uses.

In particular, this can happen if you use the npm package but the corresponding Gutenberg release is not yet public. This is, there's a few days between the Gutenberg RC (where packages are released) and the Gutenberg release where dependencies can differ.

This is my understanding so far. I'm far from an expert in this matter, but it seems an recurring issue we may have. I'm thinking we should close this issue as won't fix or repurpose it to explain/focus the bundler situation.