Skip to content
This repository has been archived by the owner on Apr 6, 2023. It is now read-only.

feat(nuxt): wrap #components client exports with createClientOnly #7412

Merged
merged 19 commits into from Oct 11, 2022

Conversation

huang-julien
Copy link
Member

πŸ”— Linked issue

resolve nuxt/nuxt#14755 , related nuxt/nuxt#14868

❓ Type of change

  • πŸ“– Documentation (updates to the documentation or readme)
  • 🐞 Bug fix (a non-breaking change that fixes an issue)
  • πŸ‘Œ Enhancement (improving an existing functionality like performance)
  • ✨ New feature (a non-breaking change that adds functionality)
  • ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

πŸ“š Description

hi ! i'm not sure if this should be considered as bug fix or feature. This PR allow importing .client component as client only components when using explicit imports from #components. It also adds ServerPlaceholder as the .client server-side fallback if there's no .server component to avoid hydration issues.

πŸ“ Checklist

  • I have linked an issue or discussion.
  • I have updated the documentation accordingly.

@netlify
Copy link

netlify bot commented Sep 11, 2022

βœ… Deploy Preview for nuxt3-docs ready!

Name Link
πŸ”¨ Latest commit 94c6f28
πŸ” Latest deploy log https://app.netlify.com/sites/nuxt3-docs/deploys/634578f4f75bf8000885eec8
😎 Deploy Preview https://deploy-preview-7412--nuxt3-docs.netlify.app
πŸ“± Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

@huang-julien huang-julien marked this pull request as draft September 12, 2022 06:56
@huang-julien
Copy link
Member Author

convert to draft due to lazy loaded client components not being lazy loaded

@huang-julien huang-julien marked this pull request as ready for review September 12, 2022 11:26
@huang-julien
Copy link
Member Author

huang-julien commented Oct 3, 2022

Hi πŸ‘‹ @danielroe @pi0
Importing from "#components" automatically break the tests due to BreakServer being exported in components.server.mjs.
It happens also on the edge channel.
Do you have any tips or solution to test this ? Maybe renaming BreakServer to BreakServer.client ? this shouldn't break the test of /client since the import is done with it's path.

Copy link
Member

I'd be happy with renaming BreaksServer πŸ‘ Would you confirm that this still preserve the integrity of the test? (That is, that if you set experimental.treeshakeClientOnly to false, the test breaks.)

@huang-julien
Copy link
Member Author

huang-julien commented Oct 4, 2022

setting treeshakeClientOnly to false does not break the tests πŸ‘ (might need to rerun the ci juste to be sure but this does not throw any error locally). let me know what you think of this πŸ™‚ .

@danielroe danielroe self-requested a review October 9, 2022 19:55
@danielroe danielroe added bug Something isn't working πŸ”¨ p3-minor-bug Priority 3: a bug in an edge case that only affects very specific usage labels Oct 9, 2022
@danielroe danielroe mentioned this pull request Oct 9, 2022
@danielroe danielroe requested a review from antfu October 10, 2022 10:20
@danielroe danielroe changed the title feat(nuxt): convert .client component with createClientOnly in #components feat(nuxt): wrap #components client exports with createClientOnly Oct 11, 2022
@danielroe danielroe merged commit ee41bb6 into nuxt:main Oct 11, 2022
@danielroe danielroe added the 3.x label Jan 19, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
3.x bug Something isn't working πŸ”¨ p3-minor-bug Priority 3: a bug in an edge case that only affects very specific usage
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Explicit import from #component of .client components throws an error server side
2 participants