Giters

jeanverster / chakra-ui-steps

Steps component designed to work seamlessly with Chakra UI

Home Page:https://chakra-ui-steps.vercel.app

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Module not found: Can't resolve '@chakra-ui/system'

darmawan01 opened this issue · comments

commented

Got some error

image

maybe anyone has the same problem and already solve it.

commented

add more error on build:

./node_modules/chakra-ui-steps/dist/chakra-ui-steps.es.js
Attempted import error: 'useStyles' is not exported from '@chakra-ui/system' (imported as 'useStyles').

Import trace for requested module:
./frontend/styles/theme.ts
./pages/_app.tsx

./node_modules/chakra-ui-steps/dist/chakra-ui-steps.es.js
Attempted import error: 'useStyles' is not exported from '@chakra-ui/react' (imported as 'useStyles$1').

Import trace for requested module:
./frontend/styles/theme.ts
./pages/_app.tsx

./node_modules/chakra-ui-steps/dist/chakra-ui-steps.es.js
Attempted import error: 'useStyles' is not exported from '@chakra-ui/react' (imported as 'useStyles$1').

Import trace for requested module:
./frontend/styles/theme.ts
./pages/_app.tsx

./node_modules/chakra-ui-steps/dist/chakra-ui-steps.es.js
Attempted import error: 'useStyles' is not exported from '@chakra-ui/system' (imported as 'useStyles').

Import trace for requested module:
./frontend/styles/theme.ts
./pages/_app.tsx

./node_modules/chakra-ui-steps/dist/chakra-ui-steps.es.js
Attempted import error: 'StylesProvider' is not exported from '@chakra-ui/system' (imported as 'StylesProvider').

Import trace for requested module:
./frontend/styles/theme.ts
./pages/_app.tsx
commented

I get a similar error:

--> can't resolve useStyles and StylesProvider imports from @chakra-ui/system and @chakra-ui/react 

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.
commented

Hey @pfedan - turns out there was a regression in one of the recent chakra versions - apparently updating chakra to the latest version will resolve this issue. Closing for now, but let me know if you still run into issues