Why does my TSC keep crashing when using MUI props

I am currently converting a Next.js and Material UI JavaScript project to TypeScript.

Here is the code for one of my components, and whenever I specify Props as an intersection type (with MUI's BoxProps), the TSC freezes and live type-checking seems to stop:

import { Box, BoxProps, SxProps } from '@mui/material'

type Props = {
  onSubmit: (e: React.FormEvent) => void
  children: React.ReactNode
  sx: SxProps
} & BoxProps
//      👆 seems to be causing freezing

export const Form = ({ onSubmit, ...props }: Props) => {
  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    onSubmit(e)
  }

  return (
    <Box
      component="form"
      onSubmit={handleSubmit}
      {...props}
    />
  )
}

Here's the error message thatI get stuck with:

Any help is appreciated.

EDIT: I've sinced noticed that it works fine if I exclude SxProps. When the two are used in the intersection type together, on the other hand... 🤔

I faced a similar issue when using MUI on a really huge monorepo project. This error will be only in development environment and not in production environment. It is caused by the way you are importing MUI components.

What is happening here when you import MUI component using tree shaking like this

import { Box, BoxProps} from '@mui/material'

Now it loads all the MUI modules and picks up Box and BoxProps out of it. Which makes the typescript compiler to freeze or slower some times.

As you can check here in MUI docs. First line says,

> Development bundles can contain the full library which can lead to
> slower startup times

👉 So it is advised to use path imports instead of tree shaking

import Box, { BoxProps } from '@mui/material/Box'

I hope it helps.