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

fix(React SSR): avoid dynamic import for the Cally calendar web component used on bq-date-picker #1431

Merged
merged 6 commits into from
Feb 13, 2025

Conversation

dgonzalezr
Copy link
Collaborator

Description

The Cally calendar component that we use in the bq-date-picker component needs global registration through customElements.define(), which will cause SSR executions to fail since there's no DOM available on the server side.
The following PR refactors how to load the Cally web component via CDN instead of dynamic import, this way bundlers like Webpack or Vite won't try to handle dynamic imports during the build's static analysis phase.

On the other hand, slot changes are ignored on the server side, which is why we need to "trigger" them when the component loads (after hydration) so the changes are applied accordingly.

Related Issue

N/A

Documentation

Screenshots (if applicable)

image

Checklist

  • I have read the CONTRIBUTING document.
  • I have read the CODE OF CONDUCT document.
  • I have reviewed my code.
  • I have tested the changes locally.
  • I have updated the documentation (if applicable).
  • I have added unit tests and e2e tests (if applicable).
  • I have requested reviews from relevant team members.

Additional Notes

Verified

This commit was signed with the committer’s verified signature.
dgonzalezr Dabiel González Ramos

Verified

This commit was signed with the committer’s verified signature.
dgonzalezr Dabiel González Ramos

Verified

This commit was signed with the committer’s verified signature.
dgonzalezr Dabiel González Ramos

Verified

This commit was signed with the committer’s verified signature.
dgonzalezr Dabiel González Ramos
…n't be applied on SSR

Verified

This commit was signed with the committer’s verified signature.
dgonzalezr Dabiel González Ramos
@dgonzalezr dgonzalezr added the bug 🐛 Something isn't working label Feb 12, 2025
Copy link

nx-cloud bot commented Feb 12, 2025

View your CI Pipeline Execution ↗ for commit 1f6afb0.

Command Status Duration Result
nx run beeq:storybook-build --output-style=stre... ✅ Succeeded 30s View ↗
nx affected -t e2e --exclude=*,!tag:core --para... ✅ Succeeded 3m 54s View ↗
nx affected -t build --exclude=*,!tag:publishab... ✅ Succeeded 2m 2s View ↗
nx affected -t test --exclude=*,!tag:core --par... ✅ Succeeded 17s View ↗
nx affected -t lint --exclude=*,!tag:publishabl... ✅ Succeeded 58s View ↗

☁️ Nx Cloud last updated this comment at 2025-02-12 10:08:17 UTC

Verified

This commit was signed with the committer’s verified signature.
dgonzalezr Dabiel González Ramos
@dgonzalezr dgonzalezr merged commit 7c3db7f into main Feb 13, 2025
6 checks passed
@dgonzalezr dgonzalezr deleted the fix/react-ssr branch February 13, 2025 11:19
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug 🐛 Something isn't working
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants