Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

SlotFill v27.4.0 error on server environments #60924

Closed
diegohaz opened this issue Apr 19, 2024 · 0 comments · Fixed by #60943
Closed

SlotFill v27.4.0 error on server environments #60924

diegohaz opened this issue Apr 19, 2024 · 0 comments · Fixed by #60943
Assignees
Labels
[Status] In Progress Tracking issues with work in progress [Type] Bug An existing feature does not function as intended

Comments

@diegohaz
Copy link
Member

Description

We conduct internal tests within Ariakit to ensure the interoperability between @ariakit/react components and @wordpress/components SlotFill. This ensures that updates to either library will not impact their compatibility.

Check out the unlisted example we're testing at: https://ariakit.org/examples/menu-wordpress-modal

An automated bot opens a PR whenever the @wordpress/components package gets updated: ariakit/ariakit#3707

However, the latest PR, which upgrades @wordpress/components to v27.4.0, is failing to build the example page due to a server error:

⨯ Internal error: Error: Missing getServerSnapshot, which is required for server-rendered content. Will revert to client rendering.
    at Object.useSyncExternalStore (/home/projects/ycbhs5/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:2674)
    at t.useSyncExternalStore (/home/projects/ycbhs5/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:163011)
    at useObservableValue (./node_modules/@wordpress/components/build-module/slot-fill/bubbles-virtually/observable-map.js:65:82)
    at useSlot (./node_modules/@wordpress/components/build-module/slot-fill/bubbles-virtually/use-slot.js:21:83)
    at Fill (./node_modules/@wordpress/components/build-module/slot-fill/bubbles-virtually/fill.js:47:60)

It appears that this useSyncExternalStore call is missing a third argument to function in server environments:

return useSyncExternalStore( subscribe, getValue );

cc @jsnajdr @DaniGuardiola

Step-by-step reproduction instructions

  1. Open https://stackblitz.com/edit/ycbhs5?file=package.json&theme=dark
  2. Wait for it to compile (it may take a while)
  3. See error

Screenshots, screen recording, code snippet

No response

Environment info

No response

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

Yes

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

Yes

@diegohaz diegohaz added the [Type] Bug An existing feature does not function as intended label Apr 19, 2024
@github-actions github-actions bot added the [Status] In Progress Tracking issues with work in progress label Apr 22, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Status] In Progress Tracking issues with work in progress [Type] Bug An existing feature does not function as intended
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants