CloseButton: Expression produces a union type that is too complex to represent

[josiahayres]

What package has an issue

@mantine/core

Describe the bug

Duplicate of #3332 - but I have been able to reproduce in a sandbox.

I'm encountering this issue when using Mantine inside an NX workspace (using PNPM to install).
I setup a brand new NX repo and cloned across all package.json dependencies and dev dependencies.

﬌ pnpm create nx-workspace

 >  NX   Let's create a new workspace [https://nx.dev/getting-started/intro]

✔ Choose what to create                 · integrated
✔ What to create in the new workspace   · react-monorepo
✔ Repository name                       · test-mantine-type-error
✔ Application name                      · mantine-test
✔ Bundler to be used to build the application · vite
✔ Default stylesheet format             · @emotion/styled
✔ Enable distributed caching to make your CI faster · No

This adds a single React app built with Vite.

In /apps/mantine-test/src/app/app.tsx I'm importing CloseButton which is also giving same error.

SRC GitHub repo: https://github.com/josiahayres/test-mantine-type-error
Codesandbox: https://codesandbox.io/p/sandbox/github/josiahayres/test-mantine-type-error/tree/main?file=/apps/mantine-test/src/app/app.tsx:16,1

Workaround

My current workaround is to disable typescript for next line 🥲

import { CloseButton, Container, Title } from '@mantine/core';
import { useDisclosure } from '@mantine/hooks';

export function App() {
  const [opened, { toggle }] = useDisclosure();
  return (
    <Container>
      <Title>Close button will toggle</Title>
      {/* // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         // @ts-ignore:next-line */}
      <CloseButton variant="transparent" onClick={() => toggle()} />
      {opened ? 'open' : 'close'}
    </Container>
  );
}

export default App;

What version of @mantine/hooks page do you have in package.json?

6.0.13

If possible, please include a link to a codesandbox with the reproduced problem

https://codesandbox.io/p/sandbox/github/josiahayres/test-mantine-type-error/tree/main?file=/apps/mantine-test/src/app/app.tsx:16,1

Do you know how to fix the issue

No

Are you willing to participate in fixing this issue and create a pull request with the fix

Yes

Possible fix

No response

[rtivital]

The issue might be in your ts configuration, I cannot reproduce it in default template – https://codesandbox.io/s/currying-wind-xre35g?file=/src/App.tsx

[josiahayres]

After a lot of investigation I have narrowed this down to an issue with Typescript itself.

The warning disappears when I downgrade to 4.8.4 (without changing the tsconfig) 🤔 (note I still encounter the error using typescript 4.9.5 or 5.0.4.

This may more likely be related to microsoft/TypeScript#53234.

Closed as clearly not issue with Mantine per se.

[douglasg14b]

Also seeing this with Flex and typescript 5.2.2

[douglasg14b]

Looks like this is the result of the types just being too large?

[moimael]

Same issue here with Flex

[DonnyVerduijn]

Potentially related: #6970