Minimal reproduction for https://github.com/chakra-ui/chakra-ui/issues/7459

README.md

Minimal reproduction for chakra-ui 7459

This minimal reproduction demonstrates a TypeScript compilation error for a simple component as well as a slightly more complex component when using @chakra-ui packages.

error TS2590: Expression produces a union type that is too complex to represent.

complex.tsx

import {Box, Button, Flex, useDisclosure, Text} from '@chakra-ui/react';
import {ChevronUpIcon, ChevronDownIcon, ViewIcon} from '@chakra-ui/icons';
import React, {FC, ReactNode} from 'react';
import {motion} from 'framer-motion';

const MotionBox = motion(Box);

interface ModuleCollapseProps {
  children: ReactNode;
  moduleName: string;
}

export const ModuleCollapse: FC<ModuleCollapseProps> = ({
  children,
  moduleName,
}) => {
  const {isOpen, onToggle} = useDisclosure({
    defaultIsOpen: true,
  });

  return (
    <>
      <Flex
        bgColor="#191919"
        color="#f5f5f5"
        paddingLeft={2.5}
        justifyContent="space-between"
      >
        <Flex alignItems="center">
          <ViewIcon w={5} h={5} />{' '}
          <Text marginLeft={2} fontWeight="bold">
            {moduleName}
          </Text>
        </Flex>
        <Button
          p={15}
          border="none"
          bgColor="transparent"
          color="#f5f5f5"
          borderRadius={0}
          _hover={{
            backgroundColor: '#303030',
          }}
          onClick={onToggle}
        >
          {isOpen ? (
            <>
              Collapse <ChevronUpIcon w={26} h={26} />
            </>
          ) : (
            <>
              Expand <ChevronDownIcon w={26} h={26} />
            </>
          )}
        </Button>
      </Flex>

      <MotionBox
        initial="open"
        animate={isOpen ? 'open' : 'collapsed'}
        variants={{
          open: {opacity: 1, height: 'auto'},
          collapsed: {opacity: 0, height: 0},
        }}
        style={{
          overflow: 'hidden',
          height: 'auto',
        }}
      >
        {children}
      </MotionBox>
    </>
  );
};

index.tsx

import { Container } from '@chakra-ui/react';

const t = () => <Container />;

package.json

{
  "name": "chakra-7459-reproduction",
  "packageManager": "yarn@4.0.0-rc.42",
  "dependencies": {
    "@chakra-ui/icons": "^2.0.18",
    "@chakra-ui/react": "^2.5.5",
    "@chakra-ui/system": "^2.5.5",
    "@emotion/react": "^11.10.6",
    "@emotion/styled": "^11.10.6",
    "framer-motion": "^10.10.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@tsconfig/node18": "^1.0.1",
    "@types/react": "^18.0.31",
    "@types/react-dom": "^18.0.11",
    "typescript": "^5.0.4"
  }
}

tsconfig.json

{
  "extends": "@tsconfig/node18/tsconfig.json",
  "compilerOptions": {
    "composite": true,
    "declarationMap": true,
    "incremental": true,
    "lib": [
      "dom",
      "es2021"
    ],
    "jsx": "react-jsx",
    "jsxImportSource": "@emotion/react",
    "target": "es2018",
    "outDir": "dist/",
    "declaration": true,
    "emitDeclarationOnly": true,
    "isolatedModules": true
  },
  "include": [
    "**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ],
  "references": [
  ]
}