Comments (9)
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.
Related Issues (20)
- Where are the v1 docs? HOT 2
- [DOCS] SfRadio with label example HOT 6
- [Bug]: SfDrawer does not support open={true} initial state HOT 2
- ProductCard block - the product information should be in a variable and not hard-coded in template HOT 1
- [Bug]: Custom scss variables not working when using yarn build & yarn start HOT 3
- [Bug]: Error [ERR_REQUIRE_ESM]: require() of ES Module ...... not supported. HOT 5
- [Bug]: error with installing dependencies for vue HOT 2
- [BUG] Cannot set width and height to SfGallery images and thumbnails HOT 3
- [Bug]: SfChip not handling initial render properly HOT 2
- [Bug]: SfSelect uses selected attribute for placeholder option HOT 1
- [Feature]: Add `handler` method to usePagination hook/composable to allow to pass a function that will run on every page change HOT 10
- Action Required: Fix Renovate Configuration
- [Bug]: Hydration Missmatch when using `SfListItem` in Nuxt 3 HOT 2
- Install Setup for vuestorefront V2 with magento2 HOT 3
- [Bug]: Facing Issue Vue Storefront UI 2 with Magento2 HOT 4
- [Bug]: String cannot represent a non string value ?
- [DX] Remove Create new Vite project section from docs HOT 6
- [Bug]: Missing `typography-hint-xs` class HOT 2
- [Bug]:
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from storefront-ui.