search

jeanverster / chakra-ui-steps

Steps component designed to work seamlessly with Chakra UI
https://chakra-ui-steps.vercel.app
390 stars 44 forks source link

Can't resolve `useStyles` and `StylesProvider` imports from `@chakra-ui/system` and `@chakra-ui/react ` #74

Closed pfedan closed 2 years ago

pfedan commented 2 years ago

Out of the blue I get the following error:

Failed to compile.

Attempted import error: 'useStyles' is not exported from '@chakra-ui/system' (imported as 'useStyles').
ERROR in ./node_modules/chakra-ui-steps/dist/chakra-ui-steps.es.js 87:6-15
export 'useStyles' (imported as 'useStyles') was not found in '@chakra-ui/system' (possible exports: CSSVars, ColorModeContext, ColorModeProvider, ColorModeScript, DarkMode, GlobalStyle, LightMode, STORAGE_KEY, ThemeProvider, addPrefix, background, border, calc, chakra, color, cookieStorageManager, cookieStorageManagerSSR, createCookieStorageManager, createLocalStorageManager, createStylesContext, css, cssVar, effect, filter, flattenTokens, flexbox, forwardRef, getCss, getScriptSrc, grid, interactivity, isStyleProp, keyframes, layout, layoutPropNames, list, localStorageManager, omitThemingProps, others, position, propNames, pseudoPropNames, pseudoSelectors, resolveStyleConfig, ring, scroll, shouldForwardProp, space, styled, systemProps, textDecoration, toCSSObject, toCSSVar, toVarDefinition, toVarReference, tokenToCSSVar, transform, transition, typography, useChakra, useColorMode, useColorModeValue, useMultiStyleConfig, useProps, useStyleConfig, useTheme, useToken)

ERROR in ./node_modules/chakra-ui-steps/dist/chakra-ui-steps.es.js 168:6-17
export 'useStyles' (imported as 'useStyles$1') was not found in '@chakra-ui/react' (possible exports: AbsoluteCenter, Accordion, AccordionButton, AccordionDescendantsProvider, AccordionIcon, AccordionItem, AccordionPanel, AccordionProvider, Alert, AlertDescription, AlertDialog, AlertDialogBody, AlertDialogCloseButton, AlertDialogContent, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertIcon, AlertTitle, AspectRatio, Avatar, AvatarBadge, AvatarGroup, Badge, Box, Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbSeparator, Button, ButtonGroup, ButtonSpinner, CSSReset, CSSVars, Center, ChakraProvider, Checkbox, CheckboxGroup, Circle, CircularProgress, CircularProgressLabel, CloseButton, Code, Collapse, ColorModeContext, ColorModeProvider, ColorModeScript, Container, ControlBox, DarkMode, DefaultIcon, Divider, Drawer, DrawerBody, DrawerCloseButton, DrawerContent, DrawerFooter, DrawerHeader, DrawerOverlay, EASINGS, Editable, EditableInput, EditablePreview, EditableTextarea, Fade, Flex, FormControl, FormErrorIcon, FormErrorMessage, FormHelperText, FormLabel, GlobalStyle, Grid, GridItem, HStack, Heading, Hide, Icon, IconButton, Image, Img, Input, InputAddon, InputGroup, InputLeftAddon, InputLeftElement, InputRightAddon, InputRightElement, Kbd, LightMode, Link, LinkBox, LinkOverlay, List, ListIcon, ListItem, Menu, MenuButton, MenuCommand, MenuDescendantsProvider, MenuDivider, MenuGroup, MenuIcon, MenuItem, MenuItemOption, MenuList, MenuOptionGroup, MenuProvider, Modal, ModalBody, ModalCloseButton, ModalContent, ModalContextProvider, ModalFocusScope, ModalFooter, ModalHeader, ModalOverlay, NumberDecrementStepper, NumberIncrementStepper, NumberInput, NumberInputField, NumberInputStepper, OrderedList, PinInput, PinInputDescendantsProvider, PinInputField, PinInputProvider, Popover, PopoverAnchor, PopoverArrow, PopoverBody, PopoverCloseButton, PopoverContent, PopoverFooter, PopoverHeader, PopoverTrigger, Portal, PortalManager, Progress, ProgressLabel, Radio, RadioGroup, RangeSlider, RangeSliderFilledTrack, RangeSliderMark, RangeSliderProvider, RangeSliderThumb, RangeSliderTrack, RequiredIndicator, STORAGE_KEY, ScaleFade, Select, SelectField, Show, SimpleGrid, Skeleton, SkeletonCircle, SkeletonText, Slide, SlideFade, Slider, SliderFilledTrack, SliderMark, SliderProvider, SliderThumb, SliderTrack, Spacer, Spinner, Square, Stack, StackDivider, StackItem, Stat, StatArrow, StatDownArrow, StatGroup, StatHelpText, StatLabel, StatNumber, StatUpArrow, StyledStepper, Switch, Tab, TabIndicator, TabList, TabPanel, TabPanels, Table, TableCaption, TableContainer, Tabs, TabsDescendantsProvider, TabsProvider, Tag, TagCloseButton, TagLabel, TagLeftIcon, TagRightIcon, Tbody, Td, Text, Textarea, Tfoot, Th, Thead, ThemeProvider, Toast, ToastProvider, Tooltip, Tr, UnorderedList, VStack, VisuallyHidden, VisuallyHiddenInput, Wrap, WrapItem, addPrefix, assignRef, background, baseStyle, border, calc, chakra, color, cookieStorageManager, cookieStorageManagerSSR, createCookieStorageManager, createIcon, createLocalStorageManager, createRenderToast, createStandaloneToast, createStylesContext, createToastFn, css, cssVar, defaultStandaloneParam, effect, extendTheme, fadeConfig, filter, flattenTokens, flexbox, forwardRef, getCss, getScriptSrc, getToastPlacement, grid, interactivity, isChakraTheme, isStyleProp, keyframes, layout, layoutPropNames, list, localStorageManager, mergeThemeOverride, omitThemingProps, others, popperCSSVars, position, propNames, pseudoPropNames, pseudoSelectors, requiredChakraThemeKeys, resolveStyleConfig, ring, scaleFadeConfig, scroll, shouldForwardProp, shouldShowFallbackImage, slideFadeConfig, space, styled, systemProps, textDecoration, theme, toCSSObject, toCSSVar, toVarDefinition, toVarReference, tokenToCSSVar, transform, transition, typography, useAccordion, useAccordionContext, useAccordionDescendant, useAccordionDescendants, useAccordionDescendantsContext, useAccordionItem, useAccordionItemState, useAnimationState, useAriaHidden, useBoolean, useBreakpoint, useBreakpointValue, useButtonGroup, useCallbackRef, useChakra, useCheckbox, useCheckboxGroup, useCheckboxGroupContext, useClipboard, useColorMode, useColorModePreference, useColorModeValue, useConst, useControllableProp, useControllableState, useCounter, useDimensions, useDisclosure, useEditable, useEditableControls, useEditableState, useEventListener, useEventListenerMap, useFocusEffect, useFocusOnHide, useFocusOnPointerDown, useFocusOnShow, useForceUpdate, useFormControl, useFormControlContext, useFormControlProps, useFormControlStyles, useId, useIds, useImage, useInputGroupStyles, useInterval, useLatestRef, useMediaQuery, useMenu, useMenuButton, useMenuContext, useMenuDescendant, useMenuDescendants, useMenuDescendantsContext, useMenuItem, useMenuList, useMenuOption, useMenuOptionGroup, useMenuPositioner, useMenuState, useMergeRefs, useModal, useModalContext, useModalStyles, useMouseDownRef, useMultiStyleConfig, useNumberInput, useOptionalPart, useOutsideClick, usePanGesture, usePinInput, usePinInputContext, usePinInputDescendant, usePinInputDescendants, usePinInputDescendantsContext, usePinInputField, usePointerEvent, usePopover, usePopoverContext, usePopper, usePortalManager, usePrefersReducedMotion, usePrevious, useProps, useQuery, useRadio, useRadioGroup, useRadioGroupContext, useRangeSlider, useRangeSliderContext, useSafeLayoutEffect, useShortcut, useSlider, useSliderContext, useStyleConfig, useTab, useTabIndicator, useTabList, useTabPanel, useTabPanels, useTabs, useTabsContext, useTabsDescendant, useTabsDescendants, useTabsDescendantsContext, useTheme, useTimeout, useToast, useToken, useTooltip, useUnmountEffect, useUpdateEffect, useWhyDidYouUpdate, visuallyHiddenStyle, withDefaultColorScheme, withDefaultProps, withDefaultSize, withDefaultVariant)

ERROR in ./node_modules/chakra-ui-steps/dist/chakra-ui-steps.es.js 236:6-17
export 'useStyles' (imported as 'useStyles$1') was not found in '@chakra-ui/react' (possible exports: AbsoluteCenter, Accordion, AccordionButton, AccordionDescendantsProvider, AccordionIcon, AccordionItem, AccordionPanel, AccordionProvider, Alert, AlertDescription, AlertDialog, AlertDialogBody, AlertDialogCloseButton, AlertDialogContent, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertIcon, AlertTitle, AspectRatio, Avatar, AvatarBadge, AvatarGroup, Badge, Box, Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbSeparator, Button, ButtonGroup, ButtonSpinner, CSSReset, CSSVars, Center, ChakraProvider, Checkbox, CheckboxGroup, Circle, CircularProgress, CircularProgressLabel, CloseButton, Code, Collapse, ColorModeContext, ColorModeProvider, ColorModeScript, Container, ControlBox, DarkMode, DefaultIcon, Divider, Drawer, DrawerBody, DrawerCloseButton, DrawerContent, DrawerFooter, DrawerHeader, DrawerOverlay, EASINGS, Editable, EditableInput, EditablePreview, EditableTextarea, Fade, Flex, FormControl, FormErrorIcon, FormErrorMessage, FormHelperText, FormLabel, GlobalStyle, Grid, GridItem, HStack, Heading, Hide, Icon, IconButton, Image, Img, Input, InputAddon, InputGroup, InputLeftAddon, InputLeftElement, InputRightAddon, InputRightElement, Kbd, LightMode, Link, LinkBox, LinkOverlay, List, ListIcon, ListItem, Menu, MenuButton, MenuCommand, MenuDescendantsProvider, MenuDivider, MenuGroup, MenuIcon, MenuItem, MenuItemOption, MenuList, MenuOptionGroup, MenuProvider, Modal, ModalBody, ModalCloseButton, ModalContent, ModalContextProvider, ModalFocusScope, ModalFooter, ModalHeader, ModalOverlay, NumberDecrementStepper, NumberIncrementStepper, NumberInput, NumberInputField, NumberInputStepper, OrderedList, PinInput, PinInputDescendantsProvider, PinInputField, PinInputProvider, Popover, PopoverAnchor, PopoverArrow, PopoverBody, PopoverCloseButton, PopoverContent, PopoverFooter, PopoverHeader, PopoverTrigger, Portal, PortalManager, Progress, ProgressLabel, Radio, RadioGroup, RangeSlider, RangeSliderFilledTrack, RangeSliderMark, RangeSliderProvider, RangeSliderThumb, RangeSliderTrack, RequiredIndicator, STORAGE_KEY, ScaleFade, Select, SelectField, Show, SimpleGrid, Skeleton, SkeletonCircle, SkeletonText, Slide, SlideFade, Slider, SliderFilledTrack, SliderMark, SliderProvider, SliderThumb, SliderTrack, Spacer, Spinner, Square, Stack, StackDivider, StackItem, Stat, StatArrow, StatDownArrow, StatGroup, StatHelpText, StatLabel, StatNumber, StatUpArrow, StyledStepper, Switch, Tab, TabIndicator, TabList, TabPanel, TabPanels, Table, TableCaption, TableContainer, Tabs, TabsDescendantsProvider, TabsProvider, Tag, TagCloseButton, TagLabel, TagLeftIcon, TagRightIcon, Tbody, Td, Text, Textarea, Tfoot, Th, Thead, ThemeProvider, Toast, ToastProvider, Tooltip, Tr, UnorderedList, VStack, VisuallyHidden, VisuallyHiddenInput, Wrap, WrapItem, addPrefix, assignRef, background, baseStyle, border, calc, chakra, color, cookieStorageManager, cookieStorageManagerSSR, createCookieStorageManager, createIcon, createLocalStorageManager, createRenderToast, createStandaloneToast, createStylesContext, createToastFn, css, cssVar, defaultStandaloneParam, effect, extendTheme, fadeConfig, filter, flattenTokens, flexbox, forwardRef, getCss, getScriptSrc, getToastPlacement, grid, interactivity, isChakraTheme, isStyleProp, keyframes, layout, layoutPropNames, list, localStorageManager, mergeThemeOverride, omitThemingProps, others, popperCSSVars, position, propNames, pseudoPropNames, pseudoSelectors, requiredChakraThemeKeys, resolveStyleConfig, ring, scaleFadeConfig, scroll, shouldForwardProp, shouldShowFallbackImage, slideFadeConfig, space, styled, systemProps, textDecoration, theme, toCSSObject, toCSSVar, toVarDefinition, toVarReference, tokenToCSSVar, transform, transition, typography, useAccordion, useAccordionContext, useAccordionDescendant, useAccordionDescendants, useAccordionDescendantsContext, useAccordionItem, useAccordionItemState, useAnimationState, useAriaHidden, useBoolean, useBreakpoint, useBreakpointValue, useButtonGroup, useCallbackRef, useChakra, useCheckbox, useCheckboxGroup, useCheckboxGroupContext, useClipboard, useColorMode, useColorModePreference, useColorModeValue, useConst, useControllableProp, useControllableState, useCounter, useDimensions, useDisclosure, useEditable, useEditableControls, useEditableState, useEventListener, useEventListenerMap, useFocusEffect, useFocusOnHide, useFocusOnPointerDown, useFocusOnShow, useForceUpdate, useFormControl, useFormControlContext, useFormControlProps, useFormControlStyles, useId, useIds, useImage, useInputGroupStyles, useInterval, useLatestRef, useMediaQuery, useMenu, useMenuButton, useMenuContext, useMenuDescendant, useMenuDescendants, useMenuDescendantsContext, useMenuItem, useMenuList, useMenuOption, useMenuOptionGroup, useMenuPositioner, useMenuState, useMergeRefs, useModal, useModalContext, useModalStyles, useMouseDownRef, useMultiStyleConfig, useNumberInput, useOptionalPart, useOutsideClick, usePanGesture, usePinInput, usePinInputContext, usePinInputDescendant, usePinInputDescendants, usePinInputDescendantsContext, usePinInputField, usePointerEvent, usePopover, usePopoverContext, usePopper, usePortalManager, usePrefersReducedMotion, usePrevious, useProps, useQuery, useRadio, useRadioGroup, useRadioGroupContext, useRangeSlider, useRangeSliderContext, useSafeLayoutEffect, useShortcut, useSlider, useSliderContext, useStyleConfig, useTab, useTabIndicator, useTabList, useTabPanel, useTabPanels, useTabs, useTabsContext, useTabsDescendant, useTabsDescendants, useTabsDescendantsContext, useTheme, useTimeout, useToast, useToken, useTooltip, useUnmountEffect, useUpdateEffect, useWhyDidYouUpdate, visuallyHiddenStyle, withDefaultColorScheme, withDefaultProps, withDefaultSize, withDefaultVariant)

ERROR in ./node_modules/chakra-ui-steps/dist/chakra-ui-steps.es.js 294:6-15
export 'useStyles' (imported as 'useStyles') was not found in '@chakra-ui/system' (possible exports: CSSVars, ColorModeContext, ColorModeProvider, ColorModeScript, DarkMode, GlobalStyle, LightMode, STORAGE_KEY, ThemeProvider, addPrefix, background, border, calc, chakra, color, cookieStorageManager, cookieStorageManagerSSR, createCookieStorageManager, createLocalStorageManager, createStylesContext, css, cssVar, effect, filter, flattenTokens, flexbox, forwardRef, getCss, getScriptSrc, grid, interactivity, isStyleProp, keyframes, layout, layoutPropNames, list, localStorageManager, omitThemingProps, others, position, propNames, pseudoPropNames, pseudoSelectors, resolveStyleConfig, ring, scroll, shouldForwardProp, space, styled, systemProps, textDecoration, toCSSObject, toCSSVar, toVarDefinition, toVarReference, tokenToCSSVar, transform, transition, typography, useChakra, useColorMode, useColorModeValue, useMultiStyleConfig, useProps, useStyleConfig, useTheme, useToken)

ERROR in ./node_modules/chakra-ui-steps/dist/chakra-ui-steps.es.js 417:13-27
export 'StylesProvider' (imported as 'StylesProvider') was not found in '@chakra-ui/system' (possible exports: CSSVars, ColorModeContext, ColorModeProvider, ColorModeScript, DarkMode, GlobalStyle, LightMode, STORAGE_KEY, ThemeProvider, addPrefix, background, border, calc, chakra, color, cookieStorageManager, cookieStorageManagerSSR, createCookieStorageManager, createLocalStorageManager, createStylesContext, css, cssVar, effect, filter, flattenTokens, flexbox, forwardRef, getCss, getScriptSrc, grid, interactivity, isStyleProp, keyframes, layout, layoutPropNames, list, localStorageManager, omitThemingProps, others, position, propNames, pseudoPropNames, pseudoSelectors, resolveStyleConfig, ring, scroll, shouldForwardProp, space, styled, systemProps, textDecoration, toCSSObject, toCSSVar, toVarDefinition, toVarReference, tokenToCSSVar, transform, transition, typography, useChakra, useColorMode, useColorModeValue, useMultiStyleConfig, useProps, useStyleConfig, useTheme, useToken)

webpack compiled with 5 errors
No issues found.

I'm using 

    "@chakra-ui/icons": "^2.0.1",
    "@chakra-ui/react": "^2.1.2",
    "@emotion/react": "^11.9.0",
    "@emotion/styled": "^11.0.0",
    "chakra-ui-steps": "^1.7.3",
pfedan commented 2 years ago

possibly linked with #73

jeanverster commented 2 years ago

Hey @pfedan thanks for pointing this out, seems to be a compatibility issue with the latest (v2+) version of chakra.. I will do some digging into this tonight and try get a patch out asap!

yomansk8 commented 2 years ago

Hey! I had the same issue today. It seems @chakra-ui/system introduced a regression where useStyles and StylesProvider where no longer exported from it.

They released a new version fixing it 2 hours ago.

Upgrading my version of @chakra-ui/react to v2.2.1 instead of v2.2.0 solved the issue for me!

Hope it can helps you too 😉

jeanverster commented 2 years ago

Thanks @yomansk8 ! Appreciate the quick response here. I'm gonna close this in light of installing v2.2.1, let me know if the issue still persists 👌