[BUG] - Spinner in v2.3.0 It's currently unsupported to use "export *" in a client boundary

[sFritsch09]

NextUI Version

2.3.0

Describe the bug

Cannot use Spinner anymore in NextJS 14.2.1 build fails with error:

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

Build worked in version 2.2.10

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

Import Spinner in app router in any page.js and start build

1. import { Spinner } from '@nextui-org/react';
2. yarn build

Expected behavior

Spinner should work with SSR

Screenshots or Videos

No response

Operating System Version

macOS

Browser

Opera

[linear]

ENG-643 [BUG] - Spinner in v2.3.0 It's currently unsupported to use "export *" in a client boundary

[jrgarciadev]

Hey, you can't import components directly from @nextui-org/react in a server component without using the use client; directive. You have two options:

1. Use the component from its specific package, e.g., import {Spinner} from '@nextui-org/spinner'. This method is recommended because we have already added the use client; directive internally for components that require it, simplifying your setup.
2. Use the component from the main package @nextui-org/react and add the use client; directive at the top of your file.

[sFritsch09]

Oki thanks that helps, it is weird because it was working before...

[volfadar]

for those who put the NextUIProvider in the Layout as server components, try to redeclare NextUIProvider in anywhere with "use client" on top of the file.

[kemiljk]

I want to be clear, these changes are awesome! Super glad to see all of this.

But...This is a pretty big breaking change for many codebases, might be worth communicating this more widely or offering a codemod to easily update to individual imports. Across a large codebase, this is a lot of work to resolve.

Took me a while to convert global imports to individual imports safely, so maybe worth some comms/messaging somewhere.

[Arek1997]

I had similar issue
./node_modules/.pnpm/@nextui-org+react-utils@2.0.11_react@18.2.0/node_modules/@nextui-org/react-utils/dist/index.mjs Error: It's currently unsupported to use "export *" in a client boundary. Please use named exports instead.

This line of code caused it
export * from "@nextui-org/react-rsc-utils";

I solved it by exports all function from this package manually
export { DOMEventNames, DOMPropNames, filterDOMProps, getValidChildren, pickChildren, renderFn } from "@nextui-org/react-rsc-utils";

EDIT

in 2.3.3v bug still remains

[DannelCu]

Hey, you can't import components directly from @nextui-org/react in a server component without using the use client; directive. You have two options:

1. Use the component from its specific package, e.g., import {Spinner} from '@nextui-org/spinner'. This method is recommended because we have already added the use client; directive internally for components that require it, simplifying your setup.
2. Use the component from the main package @nextui-org/react and add the use client; directive at the top of your file.

this currenly it is not working because the directory structure have changed and it gives a module not found error in my case was the card and card header.

[wingkwong]

Please upgrade to the latest version. Now the react package will automatically include the use client; directive #2758

The advantage you have by using individual imports, is that not all components are client component, we have some of then that can run only on the server

e.g.

https://nextui.org/docs/components/badge
https://nextui.org/docs/components/code
https://nextui.org/docs/components/divider
https://nextui.org/docs/components/kbd

[DannelCu]

Please upgrade to the latest version. Now the react package will automatically include the use client; directive #2758

The advantage you have by using individual imports, is that not all components are client component, we have some of then that can run only on the server

e.g.

https://nextui.org/docs/components/badge https://nextui.org/docs/components/code https://nextui.org/docs/components/divider https://nextui.org/docs/components/kbd

I had the latest version 2.3.2 and was getting an error from next-flight-loader, which stated that even on client components, it is not allowed. I have downgraded my next UI back to 2.2.10 and that solved the problem

[wingkwong]

@DannelCu please create a new issue with a minimal reproducible environment.

[emmadal]

for the next version you should import like this:
import {Spinner} from '@nextui-org/spinner' if you try to import it in a server component
but in a client component, please add the use client directive at the top of file then you can use the old import.
e.g. import {Spinner} from '@nextui-org'