[Feature Request]: Support for React Server Components

[francoisdtm]

Description

Hi everyone! 👋🏻

It would be a great move for Cloudscape components to support the (not so) new React Server Module Conventions v2. Many frameworks are now following this convention, making it difficult to use the components in an optimized way.

Quick fix (but not optimized)

At the moment, a simple hack is to create the following file and update your pages' imports. It makes all components 'Client Components', and should only be used as for compatibility issues. It will not make Cloudscape component 'Server Components'.

Click to reveal

'use client'
export { default as Alert } from '@cloudscape-design/components/alert'
export type { AlertProps } from '@cloudscape-design/components/alert'
export { default as AnnotationContext } from '@cloudscape-design/components/annotation-context'
export type { AnnotationContextProps } from '@cloudscape-design/components/annotation-context'
export { default as AppLayout } from '@cloudscape-design/components/app-layout'
export type { AppLayoutProps } from '@cloudscape-design/components/app-layout'
export { default as AreaChart } from '@cloudscape-design/components/area-chart'
export type { AreaChartProps } from '@cloudscape-design/components/area-chart'
export { default as AttributeEditor } from '@cloudscape-design/components/attribute-editor'
export type { AttributeEditorProps } from '@cloudscape-design/components/attribute-editor'
export { default as Autosuggest } from '@cloudscape-design/components/autosuggest'
export type { AutosuggestProps } from '@cloudscape-design/components/autosuggest'
export { default as Badge } from '@cloudscape-design/components/badge'
export type { BadgeProps } from '@cloudscape-design/components/badge'
export { default as BarChart } from '@cloudscape-design/components/bar-chart'
export type { BarChartProps } from '@cloudscape-design/components/bar-chart'
export { default as Box } from '@cloudscape-design/components/box'
export type { BoxProps } from '@cloudscape-design/components/box'
export { default as BreadcrumbGroup } from '@cloudscape-design/components/breadcrumb-group'
export type { BreadcrumbGroupProps } from '@cloudscape-design/components/breadcrumb-group'
export { default as Button } from '@cloudscape-design/components/button'
export type { ButtonProps } from '@cloudscape-design/components/button'
export { default as ButtonDropdown } from '@cloudscape-design/components/button-dropdown'
export type { ButtonDropdownProps } from '@cloudscape-design/components/button-dropdown'
export { default as Calendar } from '@cloudscape-design/components/calendar'
export type { CalendarProps } from '@cloudscape-design/components/calendar'
export { default as Cards } from '@cloudscape-design/components/cards'
export type { CardsProps } from '@cloudscape-design/components/cards'
export { default as Checkbox } from '@cloudscape-design/components/checkbox'
export type { CheckboxProps } from '@cloudscape-design/components/checkbox'
export { default as CodeEditor } from '@cloudscape-design/components/code-editor'
export type { CodeEditorProps } from '@cloudscape-design/components/code-editor'
export { default as CollectionPreferences } from '@cloudscape-design/components/collection-preferences'
export type { CollectionPreferencesProps } from '@cloudscape-design/components/collection-preferences'
export { default as ColumnLayout } from '@cloudscape-design/components/column-layout'
export type { ColumnLayoutProps } from '@cloudscape-design/components/column-layout'
export { default as Container } from '@cloudscape-design/components/container'
export type { ContainerProps } from '@cloudscape-design/components/container'
export { default as ContentLayout } from '@cloudscape-design/components/content-layout'
export type { ContentLayoutProps } from '@cloudscape-design/components/content-layout'
export { default as DateInput } from '@cloudscape-design/components/date-input'
export type { DateInputProps } from '@cloudscape-design/components/date-input'
export { default as DatePicker } from '@cloudscape-design/components/date-picker'
export type { DatePickerProps } from '@cloudscape-design/components/date-picker'
export { default as DateRangePicker } from '@cloudscape-design/components/date-range-picker'
export type { DateRangePickerProps } from '@cloudscape-design/components/date-range-picker'
export { default as ExpandableSection } from '@cloudscape-design/components/expandable-section'
export type { ExpandableSectionProps } from '@cloudscape-design/components/expandable-section'
export { default as FileUpload } from '@cloudscape-design/components/file-upload'
export type { FileUploadProps } from '@cloudscape-design/components/file-upload'
export { default as Flashbar } from '@cloudscape-design/components/flashbar'
export type { FlashbarProps } from '@cloudscape-design/components/flashbar'
export { default as Form } from '@cloudscape-design/components/form'
export type { FormProps } from '@cloudscape-design/components/form'
export { default as FormField } from '@cloudscape-design/components/form-field'
export type { FormFieldProps } from '@cloudscape-design/components/form-field'
export { default as Grid } from '@cloudscape-design/components/grid'
export type { GridProps } from '@cloudscape-design/components/grid'
export { default as Header } from '@cloudscape-design/components/header'
export type { HeaderProps } from '@cloudscape-design/components/header'
export { default as HelpPanel } from '@cloudscape-design/components/help-panel'
export type { HelpPanelProps } from '@cloudscape-design/components/help-panel'
export { default as Hotspot } from '@cloudscape-design/components/hotspot'
export type { HotspotProps } from '@cloudscape-design/components/hotspot'
export { default as Icon } from '@cloudscape-design/components/icon'
export type { IconProps } from '@cloudscape-design/components/icon'
export { default as Input } from '@cloudscape-design/components/input'
export type { InputProps } from '@cloudscape-design/components/input'
export { default as LineChart } from '@cloudscape-design/components/line-chart'
export type { LineChartProps } from '@cloudscape-design/components/line-chart'
export { default as Link } from '@cloudscape-design/components/link'
export type { LinkProps } from '@cloudscape-design/components/link'
export { default as MixedLineBarChart } from '@cloudscape-design/components/mixed-line-bar-chart'
export type { MixedLineBarChartProps } from '@cloudscape-design/components/mixed-line-bar-chart'
export { default as Modal } from '@cloudscape-design/components/modal'
export type { ModalProps } from '@cloudscape-design/components/modal'
export { default as Multiselect } from '@cloudscape-design/components/multiselect'
export type { MultiselectProps } from '@cloudscape-design/components/multiselect'
export { default as Pagination } from '@cloudscape-design/components/pagination'
export type { PaginationProps } from '@cloudscape-design/components/pagination'
export { default as PieChart } from '@cloudscape-design/components/pie-chart'
export type { PieChartProps } from '@cloudscape-design/components/pie-chart'
export { default as Popover } from '@cloudscape-design/components/popover'
export type { PopoverProps } from '@cloudscape-design/components/popover'
export { default as ProgressBar } from '@cloudscape-design/components/progress-bar'
export type { ProgressBarProps } from '@cloudscape-design/components/progress-bar'
export { default as PropertyFilter } from '@cloudscape-design/components/property-filter'
export type { PropertyFilterProps } from '@cloudscape-design/components/property-filter'
export { default as RadioGroup } from '@cloudscape-design/components/radio-group'
export type { RadioGroupProps } from '@cloudscape-design/components/radio-group'
export { default as S3ResourceSelector } from '@cloudscape-design/components/s3-resource-selector'
export type { S3ResourceSelectorProps } from '@cloudscape-design/components/s3-resource-selector'
export { default as SegmentedControl } from '@cloudscape-design/components/segmented-control'
export type { SegmentedControlProps } from '@cloudscape-design/components/segmented-control'
export { default as Select } from '@cloudscape-design/components/select'
export type { SelectProps } from '@cloudscape-design/components/select'
export { default as SideNavigation } from '@cloudscape-design/components/side-navigation'
export type { SideNavigationProps } from '@cloudscape-design/components/side-navigation'
export { default as SpaceBetween } from '@cloudscape-design/components/space-between'
export type { SpaceBetweenProps } from '@cloudscape-design/components/space-between'
export { default as Spinner } from '@cloudscape-design/components/spinner'
export type { SpinnerProps } from '@cloudscape-design/components/spinner'
export { default as SplitPanel } from '@cloudscape-design/components/split-panel'
export type { SplitPanelProps } from '@cloudscape-design/components/split-panel'
export { default as StatusIndicator } from '@cloudscape-design/components/status-indicator'
export type { StatusIndicatorProps } from '@cloudscape-design/components/status-indicator'
export { default as Table } from '@cloudscape-design/components/table'
export type { TableProps } from '@cloudscape-design/components/table'
export { default as Tabs } from '@cloudscape-design/components/tabs'
export type { TabsProps } from '@cloudscape-design/components/tabs'
export { default as TagEditor } from '@cloudscape-design/components/tag-editor'
export type { TagEditorProps } from '@cloudscape-design/components/tag-editor'
export { default as TextContent } from '@cloudscape-design/components/text-content'
export type { TextContentProps } from '@cloudscape-design/components/text-content'
export { default as TextFilter } from '@cloudscape-design/components/text-filter'
export type { TextFilterProps } from '@cloudscape-design/components/text-filter'
export { default as Textarea } from '@cloudscape-design/components/textarea'
export type { TextareaProps } from '@cloudscape-design/components/textarea'
export { default as Tiles } from '@cloudscape-design/components/tiles'
export type { TilesProps } from '@cloudscape-design/components/tiles'
export { default as TimeInput } from '@cloudscape-design/components/time-input'
export type { TimeInputProps } from '@cloudscape-design/components/time-input'
export { default as Toggle } from '@cloudscape-design/components/toggle'
export type { ToggleProps } from '@cloudscape-design/components/toggle'
export { default as TokenGroup } from '@cloudscape-design/components/token-group'
export type { TokenGroupProps } from '@cloudscape-design/components/token-group'
export { default as TopNavigation } from '@cloudscape-design/components/top-navigation'
export type { TopNavigationProps } from '@cloudscape-design/components/top-navigation'
export { default as TutorialPanel } from '@cloudscape-design/components/tutorial-panel'
export type { TutorialPanelProps } from '@cloudscape-design/components/tutorial-panel'
export { default as Wizard } from '@cloudscape-design/components/wizard'
export type { WizardProps } from '@cloudscape-design/components/wizard'
export * from '@cloudscape-design/components/interfaces'

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate requests

[just-boris]

As far as I understand, server components is an experimental technology and the API is not stable yet (if there is a stable API, please provide a link).

We do not support experimental technologies. If you want to experiment with this technology, you can make necessary patches locally.

[francoisdtm]

After further investigation, yes the technology is still experimental, my bad. Sorry about that 😶

[just-boris]

Thanks for checking! I will resolve the issue for now, but feel free to reopen if there are any news on it

[greysonevins]

Would you consider reopening this ticket now that RSC are stable?

https://react.dev/reference/rsc/server-components

[just-boris]

I am not sure the original ask to blindly add "use client"; all over our codebase is still valid, but if you have any compatibility issues, a new issue would be nice