I am trying to find a way to make Chakra UI code work with react 18 in an next js app.

When i try to use a component which starts with a component, I get an error that says:

Unexpected token Stack. Expected jsx identifier

I've tried adding outer and and <React.Fragment> tags to the component - each time, I get the same error.

What is the jsx identifier that satisfies this requirement?

The full page is:

import * as React from "react"
import { gql } from "@apollo/client"
import {
  AlertDialog,
  AlertDialogBody,
  AlertDialogContent,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogOverlay,
  Box,
  Button,
  Center,
  Flex,
  Spinner,
  Stack,
  Text,
  useDisclosure,
} from "@chakra-ui/react"

import { useDestroyAccountMutation } from "lib/graphql"
import { useLogout } from "lib/hooks/useLogout"
import { useMe } from "lib/hooks/useMe"
import { useMutationHandler } from "lib/hooks/useMutationHandler"
import { withAuth } from "components/hoc/withAuth"
import { HomeLayout } from "components/HomeLayout"
import { ProfileLayout } from "components/ProfileLayout"
import { Tile, TileBody, TileFooter, TileHeader, TileHeading } from "components/Tile"

const _ = gql`
  mutation DestroyAccount {
    destroyAccount
  }
`

function Settings() {
  const alertProps = useDisclosure()
  const { me, loading } = useMe()
  const logout = useLogout()
  const cancelRef = React.useRef<HTMLButtonElement>(null)
  const handler = useMutationHandler()

  const [destroy, { loading: destroyLoading }] = useDestroyAccountMutation()

  const handleDestroy = () => {
    return handler(destroy, { onSuccess: () => logout() })
  }
  if (loading)
    return (
      <Center>
        <Spinner />
      </Center>
    )
  if (!me) return null
  return (
    
    <Stack spacing={6}>
      <Tile>
        <TileHeader>
          <TileHeading>Danger zone</TileHeading>
        </TileHeader>
        <TileBody>
          <>
          <Text fontSize="sm">
            paragraph 1.  
          </Text>
          <Text fontSize="sm" mt="30px">
            paragraph 2.
          <Text />
          </>
        </TileBody>
        <TileFooter>
          <Flex w="100%" justify="flex-end">
            <Button
              size="sm"
              colorScheme="red"
              isDisabled={destroyLoading}
              isLoading={destroyLoading}
              onClick={alertProps.onOpen}
            >
              Delete
            </Button>
          </Flex>
          <AlertDialog
            {...alertProps}
            motionPreset="slideInBottom"
            isCentered
            leastDestructiveRef={cancelRef}
          >
            <AlertDialogOverlay>
              <AlertDialogContent>
                <AlertDialogHeader fontSize="lg" fontWeight="bold">
                  Delete account
                </AlertDialogHeader>
                <AlertDialogBody>Are you sure? </AlertDialogBody>
                <AlertDialogFooter>
                  <Button ref={cancelRef} onClick={alertProps.onClose}>
                    Cancel
                  </Button>
                  <Button
                    colorScheme="red"
                    onClick={handleDestroy}
                    isLoading={destroyLoading}
                    isDisabled={destroyLoading}
                    ml={3}
                  >
                    Delete
                  </Button>
                </AlertDialogFooter>
              </AlertDialogContent>
            </AlertDialogOverlay>
          </AlertDialog>
        </TileFooter>
      </Tile>
    </Stack>
    
  )
}

Settings.getLayout = (page: React.ReactNode) => (
  <HomeLayout>
    <ProfileLayout>{page}</ProfileLayout>
  </HomeLayout>
)

export default withAuth(Settings)

CodePudding user response：

Documentation says: You can use the <Stack> component and pass the direction prop. So i assume you might need the direction prop here. Like: <Stack direction='row' spacing={6} </Stack> or <Stack direction={['3', '4']} spacing={6} </Stack>

CodePudding user response：

In case it helps someone else. I deleted node modules and re-ran yarn. This error goes away after doing that. It doesn't answer the question - but it may help someone.