[BUG] - Error: It's currently unsupported to use "export *" in a client boundary.

[ckatala]

NextUI Version

2.3.1

Describe the bug

err: Failed to compile.
err: ./node_modules/@nextui-org/react-utils/dist/index.mjs
err: Error: It's currently unsupported to use "export *" in a client boundary. Please use named exports instead.

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

Clean installation

Expected behavior

I deleted the use client from the file ./node_modules/@nextui-org/react-utils/dist/index.mjs and everything worked

Screenshots or Videos

No response

Operating System Version

macOS

Browser

Chrome

[linear]

ENG-650 [BUG] - Error: It's currently unsupported to use "export *" in a client boundary.

[Derlis01]

I had the same problem, so I went back to a previous version, but weirdly the problem persists. I went back to:

"@nextui-org/react": "^2.2.10",
"tailwindcss": "^3.3.0",

but the problem persists. I deleted node_modules and .next for a clean install but the problem persists, does anyone know how to fix this?

[wingkwong]

See this comment

[paveldpetrov]

@wingkwong - the solution is a BREAKING change. This should not be happening in a minor version update.

[jrgarciadev]

@paveldpetrov we added the use client; internally in v2.3.2 https://github.com/nextui-org/nextui/releases/tag/%40nextui-org%2Freact%402.3.2

[Armandotrsg]

I still get this issue with version 2.3.2

[jrgarciadev]

@Armandotrsg could you create a stackblitz project?

[work7z]

I also got this error in my Next.js project

[wingkwong]

@work7z are using the latest version? We recently released some bug fixes. If so, could you create a stackblitz project?

[ldystudio]

@wingkwong In version 2.3.3，Next.js Failed to compile:

./node_modules/.pnpm/@nextui-org+react@2.3.3_@types+react@18.2.41_framer-motion@11.1.1_@emotion+is-prop-valid@0.8._ao4yj632r6lilvvgxijwjssg44/node_modules/@nextui-org/react/dist/index.mjs

Error: It's currently unsupported to use "export *" in a client boundary. Please use named exports instead.

[paveldpetrov]

@jrgarciadev - Hi! The error is not fixed. Here's codesandbox with the latest version.

[work7z]

@work7z are using the latest version? We recently released some bug fixes. If so, could you create a stackblitz project?

yes, I've tired to compile with latest version and old version, they're both failed

later I would provide a sandbox for it

[Arek1997]

I did the same thing what the last time. Exported manually all items form packages and works.
But i'm 100% sure this shouldn't looks like this :P

`"use client";

// src/index.ts
export {NextUIProvider,ProviderContext,cn,extendVariants,forwardRef,isNextUIEl,mapPropsVariants,mapPropsVariantsWithCommon,toIterator,useProviderContext} from "@nextui-org/system";
export {absoluteFullClasses,accordion,accordionItem,autocomplete,avatar,avatarGroup,badge,baseStyles,breadcrumbItem,breadcrumbs,button,buttonGroup,calendar,card,checkbox,checkboxGroup,chip,circularProgress,code,collapseAdjacentVariantBorders,colorVariants,colors,commonColors,dataFocusVisibleClasses,dateInput,datePicker,dateRangePicker,divider,drip,dropdown,dropdownItem,dropdownMenu,dropdownSection,focusVisibleClasses,groupDataFocusVisibleClasses,image,input,kbd,link,linkAnchorClasses,listbox,listboxItem,listboxSection,menu,menuItem,menuSection,modal,navbar,nextui,pagination,popover,progress,radio,radioGroup,ringClasses,scrollShadow,select,semanticColors,skeleton,slider,snippet,spacer,spinner,table,tabs,toggle,translateCenterClasses,tv,user} from "@nextui-org/theme";
export {Accordion,AccordionItem,useAccordion,useAccordionItem} from "@nextui-org/accordion";
export {Avatar,AvatarGroup,AvatarGroupProvider,AvatarIcon,useAvatar,useAvatarGroup,useAvatarGroupContext} from "@nextui-org/avatar";
export {Badge,useBadge} from "@nextui-org/badge";
export {Button,ButtonGroup,ButtonGroupProvider,useButton,useButtonGroup,useButtonGroupContext} from "@nextui-org/button";
export {Card,CardBody,CardFooter,CardHeader,CardProvider,useCard,useCardContext} from "@nextui-org/card";
export {Chip,useChip} from "@nextui-org/chip";
export {Checkbox,CheckboxGroup,CheckboxGroupProvider,CheckboxIcon,useCheckbox,useCheckboxGroup,useCheckboxGroupContext} from "@nextui-org/checkbox";
export {Code,useCode} from "@nextui-org/code";
export {Link,LinkIcon,useLink} from "@nextui-org/link";
export {Pagination,PaginationCursor,PaginationItem,PaginationItemType,usePagination,usePaginationItem} from "@nextui-org/pagination";
export {Radio,RadioGroup,RadioGroupProvider,useRadio,useRadioGroup,useRadioGroupContext} from "@nextui-org/radio";
export {Snippet,useSnippet} from "@nextui-org/snippet";
export {Spinner,useSpinner} from "@nextui-org/spinner";
export {Switch,useSwitch} from "@nextui-org/switch";
export {Tooltip,useTooltip} from "@nextui-org/tooltip";
export {User,useUser} from "@nextui-org/user";
export {CircularProgress,Progress,useProgress} from "@nextui-org/progress";
export {Input,Textarea,useInput} from "@nextui-org/input";
export {FreeSoloPopover,Popover,PopoverContent,PopoverProvider,PopoverTrigger,usePopover,usePopoverContext} from "@nextui-org/popover";
export {Dropdown,DropdownItem,DropdownMenu,DropdownSection,DropdownTrigger,useDropdown} from "@nextui-org/dropdown";
export {Image,useImage} from "@nextui-org/image";
export {Modal,ModalBody,ModalContent,ModalFooter,ModalHeader,ModalProvider,useDisclosure,useModal,useModalContext} from "@nextui-org/modal";
export {Navbar,NavbarBrand,NavbarContent,NavbarItem,NavbarMenu,NavbarMenuItem,NavbarMenuToggle,NavbarProvider,useNavbar,useNavbarContext} from "@nextui-org/navbar";
export {Table,TableBody,TableCell,TableColumn,TableHeader,TableRow,getKeyValue,useTable} from "@nextui-org/table";
export {Spacer,useSpacer} from "@nextui-org/spacer";
export {Divider,useDivider} from "@nextui-org/divider";
export {Kbd,useKbd} from "@nextui-org/kbd";
export {Tab,Tabs,useTabs} from "@nextui-org/tabs";
export {Skeleton,useSkeleton} from "@nextui-org/skeleton";
export {ScrollShadow,useScrollShadow} from "@nextui-org/scroll-shadow";
export {Select,SelectItem,SelectSection,useSelect} from "@nextui-org/select";
export {Listbox,ListboxItem,ListboxSection,useListbox} from "@nextui-org/listbox";
export {Menu,MenuItem,MenuSection,useMenu} from "@nextui-org/menu";
export {Ripple,useRipple} from "@nextui-org/ripple";
export {Slider,useSlider} from "@nextui-org/slider";
export {BreadcrumbItem,Breadcrumbs,useBreadcrumbItem,useBreadcrumbs} from "@nextui-org/breadcrumbs";
export {Autocomplete,AutocompleteItem,AutocompleteSection,useAutocomplete} from "@nextui-org/autocomplete";
// export {Calendar,CalendarDate,CalendarProvider,RangeCalendar,useCalendar,useCalendarContext,useRangeCalendar} from "@nextui-org/calendar";
export {DateInput,DateInputField,DateInputGroup,DateInputSegment,TimeInput,useDateInput,useTimeInput} from "@nextui-org/date-input";
export {DatePicker,DateRangePicker,DateRangePickerField,useDatePicker,useDateRangePicker} from "@nextui-org/date-picker";
import { VisuallyHidden } from "@react-aria/visually-hidden";
import { ResizablePanel } from "@nextui-org/framer-utils";
export {
ResizablePanel,
VisuallyHidden
};
`

[3n1tan]

I am also experiencing this bug as well, just after updating my JSON package. React NextUI is the culprit here I guess

[ldystudio]

I removed @nextui-org/react and replaced it with all subpackages,
e.g.

import { Button } from "@nextui-org/button"
import { Code } from "@nextui-org/code" 

it works fine now!

[paveldpetrov]

@ldystudio this workaround is a breaking change and it is not ok.

[3n1tan]

Sort of fixed mine, but the Dropdown Trigger menu is not working

[3n1tan]

https://nextui.org/docs/components/dropdown

The dropdown menu on the webpage is not working, I guess the developer team must be aware of this

[ivstudio]

./node_modules/@nextui-org/react/dist/index.mjs Error: It's currently unsupported to use "export *" in a client boundary. Please use named exports instead.

After updating from @nextui-org/react: 2.2.9 to 2.3.2, I started receiving the above error. Unfortunately, reverting to the previous version doesn't resolve the issue. The only workaround so far is to add 'use client' to any component using NextUI. However, this is a significant breaking change and requires substantial code updates, which is not ideal.

[Multinite]

Upgraded to latest version (2.3.4), got the same issue.
Uninstalled, then installed my prev version (2.2.10) and all is fine again.

I'll wait for this issue to be resolved before upgrading again.

[work7z]

@jrgarciadev
@ivstudio

hi bro, here's a workaround for you if you still want to use old version without adjusting existing code (like change import statement and add 'use client')

first step:

set your version as "x.x.x", remember there's no '^' or '~' prefix otherwise this dependency will still install latest package which contains BREAKING CHANGE.

    "@nextui-org/react": "2.2.9",

second step:

shutdown related services, remove folders node_modules, .cache, .next if have

third step:

re-install node_modules

[work7z]

I'm afraid that I couldn't adjust these import statement and add 'use client' one by one since there're innumerable source code files...

that's a viable workaround for my project, btw, I'm uncertain why NextUI has to provide this breaking change... it should be avoided in minor version releases like others just mentioned

[jrgarciadev]

@jrgarciadev - Hi! The error is not fixed. Here's codesandbox with the latest version.

@paveldpetrov I noticed some issues with your codesandbox, you need to add the use client; on top of the providers' file, and you cannot import the Navbar, NavbarContent, NavbarItem from the @nextui-org/react in a server component without transforming it to be a client component, I did all these tests on NextUI previous version v2.2.9

e.g.

v2.2.9 - With the issue
https://stackblitz.com/edit/stackblitz-starters-jtkxkk?file=package.json

v2.2.9 - Fixed
https://stackblitz.com/edit/stackblitz-starters-dg19f8?file=app%2Flayout.tsx

v2.3.4 - Same code as v2.2.9 working without any change
https://stackblitz.com/edit/stackblitz-starters-cyys7y?file=package.json

References:
https://nextui.org/docs/frameworks/nextjs#setup-provider
https://nextjs.org/docs/app/building-your-application/rendering/composition-patterns#using-third-party-packages-and-providers

[EricUsingGitHub]

I removed @nextui-org/react and replaced it with all subpackages, e.g.

import { Button } from "@nextui-org/button"
import { Code } from "@nextui-org/code" 

it works fine now!

This works indeed. Fixed it with this workaround in my code

[jrgarciadev]

Guys can some of you confirm if this issue is fixed using this version?

"@nextui-org/react": "0.0.0-dev-v2-20240418192457"

@paveldpetrov ?

[MaxBalaban]

I can confirm the problem with version 2.3.4. Rolling back to 2.2.9 solved it.

[jrgarciadev]

Guys can some of you confirm if this issue is fixed using this version?

"@nextui-org/react": "0.0.0-dev-v2-20240418192457"

@paveldpetrov ?

@MaxBalaban please try with this version

[MaxBalaban]

Guys can some of you confirm if this issue is fixed using this version?
"@nextui-org/react": "0.0.0-dev-v2-20240418192457"
@paveldpetrov ?

@MaxBalaban please try with this version

I just tried this version, and it's working well with no issues. It was a new deployment without cache (via Vercel).

[jrgarciadev]

Guys can some of you confirm if this issue is fixed using this version?

"@nextui-org/react": "0.0.0-dev-v2-20240418192457"

@paveldpetrov ?

@MaxBalaban please try with this version

I just tried this version, and it's working well with no issues. It was a new deployment without cache (via Vercel).

Nice thank you! @MaxBalaban

[ivstudio]

I just tried version @nextui-org/react": "0.0.0-dev-v2-20240418192457 and it works as expected. @jrgarciadev

[jrgarciadev]

Fix available in v2.3.5 https://github.com/nextui-org/nextui/releases/tag/%40nextui-org%2Freact%402.3.5

[jobsofferings]

Back on track!