Блог

введите описание изображения здесь

Когда я включаю значки, такие как «MoonIcon» или «SunIcon» из «@chakra-ui/иконки», я получаю классическую «Ошибку:Недопустимый вызов». Я не совсем уверен, чем это вызвано? Это может быть какой-то npm/yarn или другая проблема с зависимостями, есть идеи, как ее смягчить? Я использую пользовательский интерфейс Chakra с настройкой стартового набора yarn typescript.

 import * as React from "react" import {  ChakraProvider,  VStack,  Code,  Grid,  theme,  useDisclosure,  useColorModeValue,  Flex,  Box,  Text,  IconButton,  Button,  Stack,  Collapse,  Link,  Popover,  PopoverTrigger,  PopoverContent,  useBreakpointValue,  Icon,  useColorMode,  Menu,  MenuButton,  Avatar,  MenuList,  Center,  MenuDivider,  MenuItem } from "@chakra-ui/react";  import { ColorModeSwitcher } from "./ColorModeSwitcher" import { Logo } from "./Logo" import {  HamburgerIcon,  CloseIcon,  ChevronDownIcon,  ChevronRightIcon,  MoonIcon,  SunIcon, } from '@chakra-ui/icons'; import Nav from "./Navigation";   function App() {  const { colorMode, toggleColorMode } = useColorMode();  const { isOpen, onOpen, onClose } = useDisclosure();   return (   lt;ChakraProvider theme={theme}gt;  {/* lt;Nav/gt; */}  lt;Box bg={useColorModeValue('gray.100', 'gray.900')} px={4}gt;  lt;Flex h={16} alignItems={'center'} justifyContent={'space-between'}gt;  lt;Boxgt;Logolt;/Boxgt;   lt;Flex alignItems={'center'}gt;  lt;Stack direction={'row'} spacing={7}gt;  lt;Button onClick={toggleColorMode}gt;  {colorMode === 'light' ? lt;MoonIcon /gt; : lt;SunIcon /gt;}  lt;/Buttongt;   lt;Menugt;  lt;MenuButton  as={Button}  rounded={'full'}  variant={'link'}  cursor={'pointer'}  minW={0}gt;  lt;Avatar  size={'sm'}  src={'https://avatars.dicebear.com/api/male/username.svg'}  /gt;  lt;/MenuButtongt;  lt;MenuList alignItems={'center'}gt;  lt;br /gt;  lt;Centergt;  lt;Avatar  size={'2xl'}  src={'https://avatars.dicebear.com/api/male/username.svg'}  /gt;  lt;/Centergt;  lt;br /gt;  lt;Centergt;  lt;pgt;Usernamelt;/pgt;  lt;/Centergt;  lt;br /gt;  lt;MenuDivider /gt;  lt;MenuItemgt;Your Serverslt;/MenuItemgt;  lt;MenuItemgt;Account Settingslt;/MenuItemgt;  lt;MenuItemgt;Logoutlt;/MenuItemgt;  lt;/MenuListgt;  lt;/Menugt;  lt;/Stackgt;  lt;/Flexgt;  lt;/Flexgt;  lt;/Boxgt;  lt;Box textAlign="center" fontSize="xl"gt;  lt;Grid minH="100vh" p={3}gt;  lt;ColorModeSwitcher justifySelf="flex-end" /gt;  lt;VStack spacing={8}gt;  lt;Logo h="40vmin" pointerEvents="none" /gt;  lt;Textgt;  Edit lt;Code fontSize="xl"gt;src/App.tsxlt;/Codegt; and save to reload.  lt;/Textgt;  lt;Link  color="teal.500"  href="https://chakra-ui.com"  fontSize="2xl"  target="_blank"  rel="noopener noreferrer"  gt;  Learn Chakra  lt;/Linkgt;  lt;/VStackgt;  lt;/Gridgt;  lt;/Boxgt;  lt;/ChakraProvidergt;  ) }  export default App;  

Вероятно, проблема с установкой пакета пользовательского интерфейса Chakra, попробуйте переустановить пакет как:

 npm uninstall @chakra-ui/react @chakra-ui/icons  

Затем

 npm i @chakra-ui/react @chakra-ui/icons   

Перезагрузите приложение react

 npm start