Chakra UI v3アップデートのハマりどころまとめ

npm uninstall @emotion/styled framer-motion
npm install @chakra-ui/react@latest @emotion/react@latest
npx @chakra-ui/cli snippet add

// theme.ts:（v3の例）
import { createSystem, defaultConfig } from "@chakra-ui/react"

export const customConfig = defineConfig({
  theme: {
    tokens: {
      fonts: {
        heading: { value: `'Figtree', sans-serif` },
        body: { value: `'Figtree', sans-serif` },
      },
    },
  },
})

// _app.tsx
import { ChakraProvider } from "@chakra-ui/react"

const App: FC<AppProps<AppInitialProps>> = ({ Component, pageProps }) => {
  const theme = useTheme()
  return (
    <ChakraProvider theme={theme}>
      <Component {...pageProps} />
    </ChakraProvider>
  )
}

export default App

// _app.tsx
"use client"

import { ChakraProvider } from "@chakra-ui/react"
import { ThemeProvider } from "next-themes"
import { ColorModeProvider } from "./color-mode"
import { useTheme } from "../../libs/chakra-ui/hooks/useTheme"

const App: FC<AppProps<AppInitialProps>> = ({ Component, pageProps }) => {
  const customConfig = useTheme()
  return (
    <ChakraProvider value={customConfig}>
      <Component {...pageProps} />
    </ChakraProvider>
  )
}

// Before
"moduleResolution": "node"
// After
"moduleResolution": "bundler"

return (
  <Checkbox.Root>
    <Checkbox.HiddenInput isChecked />
    <Checkbox.Control />
    <Checkbox.Label>{label}</Checkbox.Label>
  </Checkbox.Root>
)

<Accordion.Root>
  <Accordion.Item>
    <Accordion.ItemTrigger>
      <Accordion.ItemIndicator />
    </Accordion.ItemTrigger>
    <Accordion.ItemContent>
      <Accordion.ItemBody />
    </Accordion.ItemContent>
  </Accordion.Item>
</Accordion.Root>

<Accordion.Root spaceY="4" variant="plain" collapsible defaultValue={["b"]}>
  {items.map((item, index) => (
    <Accordion.Item key={index} value={item.value}>
      <Box position="relative">
        <Accordion.ItemTrigger indicatorPlacement="start">
          {item.title}
        </Accordion.ItemTrigger>
        <AbsoluteC.enter axis="vertical" insetEnd="0">
          <Button variant="subtle" colorPalette="blue">
            Action
          </Button>
        </AbsoluteCenter>
      </Box>
      <Accordion.ItemContent>{item.text}</AccordionItemContent>
    </Accordion.Item>
  ))}
</Accordion.Root>

"use client"

import { Accordion, Span, Stack, Text } from "@chakra-ui/react"
import { useState } from "react"

const Demo = () => {
  const [value, setValue] = useState(["second-item"])
  return (
    <Stack gap="4">
      <Text fontWeight="medium">Expanded: {value.join(", ")}</Text>
      <Accordion.Root value={value} onValueChange={(e) => setValue(e.value)}>
        {items.map((item, index) => (
          <Accordion.Item key={index} value={item.value}>
            <Accordion.ItemTrigger>
              <Span flex="1">{item.title}</Span>
-               <AccordionIcon />
            </Accordion.ItemTrigger>
            <Accordion.ItemContent>
              <Accordion.ItemBody>{item.text}</Accordion.ItemBody>
            </Accordion.ItemContent>
          </Accordion.Item>
        ))}
      </Accordion.Root>
    </Stack>
  )
}

// ...

"use client"

import { Accordion, Span, Stack, Text } from "@chakra-ui/react"
import { useState } from "react"

const Demo = () => {
  const [value, setValue] = useState(["second-item"])
  return (
    <Stack gap="4">
      <Text fontWeight="medium">Expanded: {value.join(", ")}</Text>
      <Accordion.Root value={value} onValueChange={(e) => setValue(e.value)}>
        {items.map((item, index) => (
          <Accordion.Item key={index} value={item.value}>
            <Accordion.ItemTrigger>
              <Span flex="1">{item.title}</Span>
+               <Accordion.ItemIndicator />
            </Accordion.ItemTrigger>
            <Accordion.ItemContent>
              <Accordion.ItemBody>{item.text}</Accordion.ItemBody>
            </Accordion.ItemContent>
          </Accordion.Item>
        ))}
      </Accordion.Root>
    </Stack>
  )
}

// ...

import {
  Button,
  Modal,
  ModalBody,
  ModalCloseButton,
  ModalContent,
  ModalHeader,
  ModalOverlay,
  useDisclosure,
} from "@chakra-ui/react"

export const RestrictionAdder: FC<Props> = ({ appendRestriction }) => {
  const { isOpen, onOpen, onClose } = useDisclosure()

  const handleOpenAdderModal = useCallback(() => {
    onOpen()
  }, [onOpen])

  const handleAdderModalSubmit = useCallback(
    (field: MagazineRestrictionFromFields) => {
      appendRestriction(field)
      onClose()
    },
    [appendRestriction, onClose],
  )

  return (
    <>
      <Button
        onClick={handleOpenAdderModal}
        borderRadius="lg"
        colorScheme="gray"
        fontWeight="nomal"
        marginTop="12px">
        条件を追加
      </Button>

      <Modal isOpen={isOpen} onClose={onClose} size="full">
        <ModalOverlay />
        <ModalContent padding="24px 40px">
          <ModalHeader>条件を追加</ModalHeader>
          <ModalCloseButton />
          <ModalBody>
            <RestrictionForm
              onSubmit={handleAdderModalSubmit}
              defaultValues={{}}
            />
          </ModalBody>
        </ModalContent>
      </Modal>
    </>
  )
}

import { Button, CloseButton, Dialog, Portal } from "@chakra-ui/react"
    
    <Dialog.Root size="full" padding="24px 40px">
        <Dialog.Trigger>
          <Button
            width="full"
            borderRadius="lg"
            bgColor="gray.100"
            color="gray.950"
            fontSize="16px"
            fontWeight="normal"
            marginTop="12px">
            条件を追加
          </Button>
        </Dialog.Trigger>
        <Portal>
          <Dialog.Positioner>
            <Dialog.Content>
              <Dialog.Header>条件を追加</Dialog.Header>
              <Dialog.CloseTrigger>
                <CloseButton position="absolute" top="8px" right="8px" />
              </Dialog.CloseTrigger>

              <Dialog.Body>
                <RestrictionForm
                  onSubmit={handleAdderModalSubmit}
                  defaultValues={{}}
                />
              </Dialog.Body>
            </Dialog.Content>
          </Dialog.Positioner>
        </Portal>
      </Dialog.Root>

// 例: StackSeparator は separator propsに渡す
<Stack
  spaceX={{ base: "0", lg: "6" }}
  spaceY={{ base: "8", lg: "6" }}
  separator={<StackSeparator />}
  padding="24px 0">
  {children}
</Stack>

<Stack gap="4">
  <SimpleGrid
    gap="4"
    // ...
   >
  </SimpleGrid>
  // ...
</Stack>

<Stack spacing="4">
  <SimpleGrid
    spacing="4"
    // ...
  >
  </SimpleGrid>
  // ...
</Stack>

<NumberInput>
  <NumberInputField />
  <NumberInputStepper>
    <NumberIncrementStepper />
    <NumberDecrementStepper />
  </NumberInputStepper>
</NumberInput>

<NumberInput.Root>
  <NumberInput.Input />
  <NumberInput.Control>
    <NumberInput.IncrementTrigger />
    <NumberInput.DecrementTrigger />
  </NumberInput.Control>
</NumberInput.Root>

 <IconButton
  icon={<BiCheck />}
  aria-label="Submit"
  {...getSubmitButtonProps}
/>

<IconButton
  size="sm"
  bgColor="gray.100"
  aria-label="Edit"
  onClick={handleEdit}>
  <BiSearch color="black" />
</IconButton>

import { toaster } from "../../../../components/ui/toaster"

// ...
toaster.create({ title: "新しい記事を作成しました", status: "success" })