[Bug]: [REACT - Next.js] floating-ui is causing server error on SSR about storefront-ui HOT 9 OPEN

In the current project, we copied the source code of the button and made our own custom button from the storefront base.
After a bit of investigation, I found out that the import statement from storefront UI is causing this error to happen, although all we import is types and enums.

import {
  type SfButtonProps as OriginalSfButtonProps,
  SfButtonSize,
  SfButtonVariant,
  polymorphicForwardRef
} from '@storefront-ui/react';

After trying out some stuff, it became apparent that importing and using anything from @storefront-ui/react that's not prefixed with the type keyword in the import will, in fact, use useEffect and throw the error mentioned above.

In other words, I can simply use the normal forwardRef, and define the SfButtonSize and SfButtonVariant myself and I wouldn't have this issue.

from storefront-ui.

We've been investigating this issue a bit and went to the same conclusion as @karimshalapy. Using any component from the SFUI simply does not work as RSC at the moment. Unfortunately, We can't suggest anything better than using use client directive for now. We're looking forward to hear suggestions on how to deal with it. Meanwhile, we'll be looking into this as well.

from storefront-ui.

And I think if the Storefront UI components should only be rendered on the client, wouldn't it be better to add "use client" in the exported components? Material UI does this as you can see here: https://github.com/mui/material-ui/blob/master/packages/mui-base/src/Button/Button.tsx

@karimshalapy use client is next 13 only specific thing, component can be run in pure react, astro, gatsby etc. So we would like to not constrain ourselves to only one meta-framework. However there seems to be other issue here like @dkacper replied.

from storefront-ui.

Hello @maciej-jezierski , thank you for creating issue ticket, as far as I know since next 13, you have to differentiate server side and client side component with use client attribute, by default all components are server side which means floating-ui won't work. For me its desired outcome. However since I'm not react expect @dkacper could you please lend your expertise here please ? Thank

from storefront-ui.

hey @Szymon-dziewonski the problem in the above code we didn't use floating ui, yet it was invoked. This is the only component as we are testing waters now.

from storefront-ui.

I know that in next we need to explicitly mention which components are client component because the interactivity can not happen on the server.
I am not experienced with Storefront UI, but from what I see, the SFButton component takes in an as prop, and in this prop I can pass the NextLink and if this is a valid usage, then shouldn't this element renderable on the server?

I will copy the source code of the button and try some stuff then report the findings here.

from storefront-ui.

And I think if the Storefront UI components should only be rendered on the client, wouldn't it be better to add "use client" in the exported components?
Material UI does this as you can see here: https://github.com/mui/material-ui/blob/master/packages/mui-base/src/Button/Button.tsx

from storefront-ui.

@Szymon-dziewonski If all components are available only on the client side it vastly limits the usability of the framework on production usage in ecommerce where clients place very high importance on SEO and links should be ready once server rendering is finished.

from storefront-ui.

@maciej-jezierski I understand that, totally agree with you, some of components like button or chip etc should be used sever side. On the other hand there are components like tooltip that can't be run server side, just because there is no browser context need to run specific operations.

At the end, we are not yet know what is the issue but for sure we will investigate. I do appreciate your contribution here, we definitely will check this out, once we will have some answers we will respond here. Thanks!

from storefront-ui.