Repository: material-ui
Issue: Using Next.js 13, some imports (particularly SxProps type) are causing TypeScript and `next build` to stall
Labels: package: system,nextjs

### Duplicates

- [X] I have searched the existing issues

### Latest version

- [X] I have tested the latest version

### Steps to reproduce 🕹

Link to live example: (N/A)

Steps:

1. use `npx create-next-app` to build a Next.js 13 project with TypeScript=yes, ESLint=yes, experimental app dir=yes
2. Create a new file (
3. in my case this is an icon file) that imports `{ SxProps} from @mui/material` (see below code example):
4. Run `next build` from terminal, and it will stall out on "Linting and checking validity of types". TypeScript in VSCode will also churn for a very long time or indefinitely, possibly because of some circular imports? A Shift ⌘ P `Restart TypeScript Server` sometimes fixes it.
5. Possibly related: https://github.com/vercel/next.js/issues/32314 - I have tried the experimental disable esm option (Next seems to not care), and the other `transpilePackages` option (which Next doesn't even seem to recognize on 13 anymore?) to no avail.

In short, it seems that `SxProps` is maybe importing from the wrong place, or creating a circular import. If I copy out the type definition for `SxProps`, and instead try importing `SystemStyleObject`, it tries to import *it* from @mui/system which doesn't seem to be there:

```
import { SystemStyleObject } from "@mui/system";
  
type SxProps<Theme extends object = {}> =
  | SystemStyleObject<Theme>
  | ((theme: Theme) => SystemStyleObject<Theme>)
  | ReadonlyArray<
      boolean | SystemStyleObject<Theme> | ((theme: Theme) => SystemStyleObject<Theme>)
    >;
```

But replacing any reference to `SystemStyleObject<Theme>` with `any` allows the project to build. If I continue down this rabbit hole, it seems like any types imported from `@mui/system/styleFunctionSx` causes this problem.

### Current behavior 😯

<img width="961" alt="Screenshot 2023-02-03 at 9 27 50 AM" src="https://user-images.githubusercontent.com/1480253/216668668-ef11de7c-86de-438f-b9fa-51efbce5e07f.png">

Terminal just does this indefinitely, have to force kill it. It also stalls out in the Next -> Vercel deployment, and there are *no* build logs anywhere that I can see.

### Expected behavior 🤔

It is maybe too much to ask, but

```
info  - Generating static pages (3/3)
info  - Finalizing page optimization  

Route (app)                                Size     First Load JS
─ ○ /                                      0 B                0 B
+ First Load JS shared by all              82.7 kB
  ├ chunks/17-f2d707dd60cbbe95.js          80.4 kB
  ├ chunks/main-app-75838474ac2d918f.js    216 B
  └ chunks/webpack-bf40d3e2e2b9f54b.js     2.11 kB

Route (pages)                              Size     First Load JS
┌ ○ /404                                   179 B          81.2 kB
├ λ /api/hello                             0 B              81 kB
+ First Load JS shared by all              81 kB
  ├ chunks/main-7f0563c831689cf4.js        78.7 kB
  ├ chunks/pages/_app-5841ab2cb3aa228d.js  192 B
  └ chunks/webpack-bf40d3e2e2b9f54b.js     2.11 kB

λ  (Server)  server-side renders at runtime (uses getInitialProps or getServerSideProps)
○  (Static)  automatically rendered as static HTML (uses no initial props)

✨  Done in 10.87s.
```

### Context 🔦

Not how this is affecting me, but project structure may help:

(This is a standard Next wizard built app, but nevertheless)

```
.next/
.vscode/
public/
src/
  ﹂app/
      lib/
      pages/api/hello.ts // stock, no changes
      styles/
        ﹂colors/
             ﹂colors.types.ts
        ﹂icons/
             ﹂AircraftPrivateJetMd.tsx
           appTheme.ts
```


``` jsx | tsx
// generated via: https://github.com/brandonscript/mui-svg-icons-generator
import * as React from "react";
import { CSSProperties } from "@mui/styles";
import { SvgIcon, SvgIconProps, SxProps } from "@mui/material";
//                                 ^ the sadness
// import type { SxProps } from "@mui/system/styleFunctionSx/styleFunctionSx.d";
// ^ have had some success importing from here - I got it to compile just twice, but VSCode doesn't seem to know about this path, and it has failed every other time.
import { memo } from "react";
const SvgAircraftPrivateJetMd = (
  props: SvgIconProps & { sx?: SxProps<CSSProperties> }
) => {
  const { sx, ...other } = props;

  const fontSize =
    other.fontSize || sx?.fontSize || other?.style?.fontSize || undefined;
  const sizeClassName = fontSize
    ? "PacificAviatorSvgIcon-sizeCustom"
    : "PacificAviatorSvgIcon-sizeMd";
  return (
    <SvgIcon
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      preserveAspectRatio="xMidYMid meet"
      viewBox="0 0 30 30"
      className={`PacificAviatorSvgIcon-AircraftPrivateJetIcon_md ${sizeClassName}`}
      style={{
        fill: "none",
      }}
      sx={{
        ...sx,
      }}
      {...other}
    >
      <path
        d="M10.1 17.212a4.9 4.9 0 1 0 9.8 0 4.9 4.9 0 0 0-9.8 0ZM13.367 15.58h3.266M15 12.313V7.888M11.235 14.078 9.078 11.92M6.29 10.766a1.633 1.633 0 1 0 3.266 0 1.633 1.633 0 0 0-3.266 0ZM18.765 14.078l2.157-2.157M20.444 10.766a1.633 1.633 0 1 0 3.266 0 1.633 1.633 0 0 0-3.266 0Z"
        stroke="currentColor"
        strokeWidth={1.503}
        strokeLinecap="round"
        strokeLinejoin="round"
      />
      <path
        d="M18.163 20.953h6.908a2.178 2.178 0 0 0 2.178-2.177M2.751 18.776a2.177 2.177 0 0 0 2.178 2.177h6.913M12.822 7.888h4.356"
        stroke="currentColor"
        strokeWidth={1.503}
        strokeLinecap="round"
        strokeLinejoin="round"
      />
    </SvgIcon>
  );
};
const Memo = memo(SvgAircraftPrivateJetMd);
export default Memo;
```


```ts
// appTheme.ts

import { createTheme, responsiveFontSizes, Theme } from "@mui/material/styles";

const theme: Theme = createTheme({
  palette: {
    mode: "light",
  },
  components: {
      // none
  },
});

const compositeTheme = responsiveFontSizes((theme), {
  factor: 1.25,
});

export default compositeTheme;
```

```ts
// colors.types.ts

import { Palette, PaletteOptions } from "@mui/material";

export interface ExtendedPalette<T extends Palette | PaletteOptions> {
  brand?: T["primary"];
}

declare module "@mui/material/styles/createPalette" {
  interface TypeBackground {
    well?: string;
  }
}

declare module "@mui/material/styles" {
  interface Palette extends ExtendedPalette<Palette> {}
  interface PaletteOptions extends ExtendedPalette<PaletteOptions> {}
}
```
          
```json
// tsconfig.json

{
  "compilerOptions": {
    "baseUrl": "./src",
    "target": "ESNext",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "plugins": [
      {
        "name": "next"
      }
    ],
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
  "exclude": ["node_modules"]
}
```

``` js
// next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    appDir: true,
  },
  eslint: {
    ignoreDuringBuilds: true,
  },
};

module.exports = nextConfig
```

``` json
// package.json

{
  "name": "next13-test",
  "version": "2.0.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@emotion/react": "^11.10.5",
    "@emotion/styled": "^11.10.5",
    "@mui/material": "^5.11.7",
    "@mui/styled-engine": "^5.11.0",
    "@mui/styles": "^5.11.7",
    "@mui/system": "^5.11.7",
    "@next/font": "^13.1.6",
    "@types/node": "18.11.18",
    "@types/react": "18.0.26",
    "@types/react-dom": "18.0.10",
    "eslint": "8.30.0",
    "eslint-config-next": "^13.1.6",
    "next": "^13.1.6",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "main": "app/page.tsx",
  "devDependencies": {
    "@babel/core": "^7.0.0",
    "@types/react-syntax-highlighter": "^15.5.5",
    "prettier": "^2.8.3",
    "typescript": "^4.9.5",
    "yarn": "^1.22.19"
  }
}
```

### Your environment 🌎

<details>
  <summary><code>npx @mui/envinfo</code></summary>

```
  npx: installed 2 in 1.512s

  System:
    OS: macOS 13.1
  Binaries:
    Node: 18.3.0 - ~/.local/share/nvm/v18.3.0/bin/node
    Yarn: 1.22.19 - ~/Dev/next13-test/node_modules/.bin/yarn
    npm: 8.11.0 - ~/.local/share/nvm/v18.3.0/bin/npm
  Browsers:
    Chrome: 109.0.5414.119 <- normally I use for dev, but this is a headless problem.
    Edge: Not Found
    Firefox: 107.0
    Safari: 16.2
  npmPackages:
    @emotion/react: ^11.10.5 => 11.10.5 
    @emotion/styled: ^11.10.5 => 11.10.5 
    @mui/base:  5.0.0-alpha.116 
    @mui/core-downloads-tracker:  5.11.7 
    @mui/material: ^5.11.7 => 5.11.7 
    @mui/private-theming:  5.11.7 
    @mui/styled-engine: ^5.11.0 => 5.11.0 
    @mui/styles: ^5.11.7 => 5.11.7 
    @mui/system: ^5.11.7 => 5.11.7 
    @mui/types:  7.2.3 
    @mui/utils:  5.11.7 
    @types/react: 18.0.26 => 18.0.26 
    react: ^18.2.0 => 18.2.0 
    react-dom: ^18.2.0 => 18.2.0 
    typescript: ^4.9.5 => 4.9.5 

```
</details>