createBreakpoints causes incompatibilities with ThemeOverride type

🐛 Bug report

After I updated to @chakra-ui/react@1.3.2 I kept getting this error

Type '{ styles: { global: { [x: string]: { height: string; width: string; fontFamily: string; bg: string; color: string; overflowX: string; scrollBehavior?: undefined; verticalAlign?: undefined; boxSizing?: undefined; } | { ...; } | { ...; } | { ...; }; body: { ...; }; svg: { ...; }; '*': { ...; }; }; }; fonts: { ...; }; ...' is not assignable to type 'ThemeOverride'.
  Type '{ styles: { global: { [x: string]: { height: string; width: string; fontFamily: string; bg: string; color: string; overflowX: string; scrollBehavior?: undefined; verticalAlign?: undefined; boxSizing?: undefined; } | { ...; } | { ...; } | { ...; }; body: { ...; }; svg: { ...; }; '*': { ...; }; }; }; fonts: { ...; }; ...' is not assignable to type 'DeepThemeExtension<{ components: { Accordion: { parts: string[]; baseStyle: { container: { borderTopWidth: string; borderColor: string; _last: { borderBottomWidth: string; }; }; button: { fontSize: string; _focus: { boxShadow: string; }; _hover: { ...; }; _disabled: { ...; }; px: number; py: number; }; panel: { ...;...'.
    The types of 'breakpoints.toString' are incompatible between these types.
      Type '(() => string) & (() => string)' is not assignable to type 'string'.

and my breakpoints look like this

import { createBreakpoints } from '@chakra-ui/theme-tools';

const breakpoints = createBreakpoints({
  sm: '375px',
  md: '580px',
  lg: '768px',
  xl: '1024px',
  '2xl': '1280px',
});

export default breakpoints;

I tried multiple things to fix this issue but no luck.

Things I tried:

• chakra-cli -> no luck since the code couldn’t be executed since this is a TS error
• Using breakpoints from chakra’s default theme but again same error occurred
• Different Typescript versions

💥 Steps to reproduce

You cannot build the application at all 🙈

💻 Link to reproduction

I was not able to reproduce the error in codesandbox and the repo where the error has occurred is a private one.

🧐 Expected behavior

Tell us what you expect to happen.

🧭 Possible Solution

Not compulsory, but suggesting a fix would be great!

🌍 System information

Software	Version(s)
Chakra UI	1.3.2
Browser	-
Operating System	MacOS BigSur 11.2.1

I am using:

"@chakra-ui/react": "^1.3.2",
"@emotion/react": "^11.1.5",
"@emotion/styled": "^11.1.5",
"next": "^10.0.5",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"typescript": "^4.1.3"

📝 Additional information

If I downgrade the chakra-ui/react I don’t get the error anymore.

[TimKolberger]

I just pushed a fix for this. If you are curious and would like to test this solution, you could replace the type DeepThemeExtension in node_modules/@chakra-ui/react/dist/types/extend-theme.d.ts with

declare type DeepThemeExtension<BaseTheme, ThemeType> = {
  [Key in keyof BaseTheme]?: BaseTheme[Key] extends (...args: any[]) => any
    ? DeepThemeExtension<
        Partial<ReturnType<BaseTheme[Key]>>,
        CloneKey<ThemeType, Key>
      >
    : BaseTheme[Key] extends Array<any>
    ? CloneKey<ThemeType, Key>
    : BaseTheme[Key] extends object
    ? DeepThemeExtension<Partial<BaseTheme[Key]>, CloneKey<ThemeType, Key>>
    : CloneKey<ThemeType, Key>;
};

[kristian240]

TL;DR; Use strict: true in your tsconfig file.

Hi @TimKolberger. I updated the issue and that didn’t seemed to work. However I was trying to reproduce the issue on CodeSandbox (there is no issue by default) and noticed that mine tsconfig and default one there aren’t the same. So I played with it a bit and found out that this issue occurs when strict: false is being used.

So with this said, I created a sandbox and here it is https://codesandbox.io/s/sleepy-sanne-t3fk4?file=/src/App.tsx

Not sure to close it or not, but if you think we should close it, feel free to close it