Repository: material-ui
Issue: ES6 is not converted to ES5 after packaging
Labels: package: system,v4.x

### Duplicates

- [X] I have searched the existing issues

### Latest version

- [X] I have tested the latest version

### Steps to reproduce 🕹

_No response_

### Current behavior 😯

Sorry my English is not very good
After I use nextjs to package, only @ material ui code has not been compiled into es5, which makes my code unable to run in IE.
I tried many configurations but couldn't solve them. I like to use @ material ui. I hope you can help me.


抱歉我的英语不是很好

我使用nextjs 打包过后，只有 @material-ui 的代码并没有编译成es5，这使我的代码无法运行在IE中。
我尝试了很多配置都无法解决，我很喜欢使用 @material-ui，希望大家能够帮助我。



### Expected behavior 🤔

Capable of running in IE

### Context 🔦

_No response_

### Your environment 🌎

<details>
  <summary><code>TypeScript </code></summary>

```
{
  "compilerOptions": {
    "baseUrl": ".",
    "target": "es5",
    "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,
    "paths": {
      "@/*": ["./*"],
    }
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
  "exclude": ["node_modules"],
}

```
</details>

<details>
  <summary><code>package.json</code></summary>

```
{
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "local": "cross-env WEB_NODE_ENV=local next dev -p 3000",
    "dev": "cross-env WEB_NODE_ENV=dev next dev -p 3000",
    "test": "cross-env WEB_NODE_ENV=test next dev -p 3000",
    "prev": "cross-env WEB_NODE_ENV=prev next dev -p 3000",
    "prod": "cross-env WEB_NODE_ENV=prod next dev -p 3000",
    "dev_build": "cross-env WEB_NODE_ENV=dev next build",
    "test_build": "cross-env WEB_NODE_ENV=test next build",
    "prep_build": "cross-env WEB_NODE_ENV=prep next build",
    "prod_build": "cross-env WEB_NODE_ENV=prod next build",
    "build": "npm run prod_build",
    "dev_build_export": "npm run dev_build && cross-env WEB_NODE_ENV=dev next export",
    "test_build_export": "npm run test_build && cross-env WEB_NODE_ENV=test next export",
    "prep_build_export": "npm run prep_build && cross-env WEB_NODE_ENV=prep next export",
    "prod_build_export": "npm run prod_build && cross-env WEB_NODE_ENV=prod next export",
    "build_export": "npm run prod_build && cross-env WEB_NODE_ENV=prod next export",
    "start": "npm run dev",
    "serve": "npm run dev",
    "lint": "next lint"
  },
  "dependencies": {
    "@emotion/react": "^11.10.5",
    "@emotion/server": "^11.10.0",
    "@emotion/styled": "^11.10.5",
    "@material-ui/core": "^4.12.4",
    "@material-ui/icons": "^4.11.3",
    "@types/node": "18.11.9",
    "@types/react": "18.0.24",
    "@types/react-dom": "18.0.8",
    "axios": "^1.1.3",
    "classnames": "^2.3.2",
    "cross-env": "^7.0.3",
    "dayjs": "^1.11.6",
    "intercept-stdout": "^0.1.2",
    "js-cookie": "^3.0.1",
    "lottie-web": "^5.9.6",
    "next": "13.0.1",
    "next-transpile-modules": "^10.0.0",
    "qrcode.react": "^3.1.0",
    "rc-notification": "^4.6.1",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-intl-universal": "^2.6.10",
    "recoil": "^0.7.6",
    "sass": "^1.55.0",
    "use-force-update": "^1.0.10",
    "yup": "^0.32.11"
  },
  "devDependencies": {
    "@babel/plugin-external-helpers": "^7.18.6",
    "@babel/plugin-transform-arrow-functions": "^7.18.6",
    "@babel/preset-env": "^7.20.2",
    "@babel/preset-react": "^7.18.6",
    "@svgr/webpack": "^6.5.1",
    "@types/js-cookie": "^3.0.2",
    "@types/mockjs": "^1.0.7",
    "babel-plugin-import": "^1.13.5",
    "mockjs": "^1.1.0",
    "postcss-loader": "^7.0.1",
    "postcss-px-to-viewport": "^1.1.1",
    "typescript": "^4.8.4"
  }
}


```
</details>

<details>
  <summary><code>.babelrc</code></summary>

```
{
  "presets": [
    "next/babel",
    [
      "@babel/preset-env",
      {
        "useBuiltIns": "entry",
        "corejs": "3.22"
      }
    ]
    // "@babel/preset-react"
  ],
  "plugins": [
    "@babel/plugin-transform-arrow-functions"
    // "@babel/plugin-external-helpers"
    // [
    //   "babel-plugin-import",
    //   {
    //     "libraryName": "@material-ui/core",
    //     "libraryDirectory": "",
    //     "camel2DashComponentName": false
    //   },
    //   "core"
    // ],
    // [
    //   "babel-plugin-import",
    //   {
    //     "libraryName": "@mui/icons-material",
    //     "libraryDirectory": "",
    //     "camel2DashComponentName": false
    //   },
    //   "icons"
    // ]
  ]
}

```
</details>

<details>
  <summary><code>_app.tsx</code></summary>

```
import * as React from 'react'
import { useState } from 'react'
// import localFont from '@next/font/local'
import { AppProps, NextWebVitalsMetric } from 'next/app'
import { ThemeProvider } from '@material-ui/core/styles'
import CssBaseline from '@material-ui/core/CssBaseline'
import { CacheProvider, EmotionCache } from '@emotion/react'
import theme from '../config/theme.config'
import createEmotionCache from '../config/createEmotionCache.config'
import Recoil, { MutableSnapshot, useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil'
import PropTypes from 'prop-types'
import service from '@/utils/request'
import { useMyLayoutEffect } from '@/utils/hooks'
import { WEB_NODE_ENV } from '@/config'
import classNames from 'classnames'
import { GlobalData, globalData, globalState as globalStateStore } from '@/store/global'
import { setToken } from '@/utils/auth'
import { ButtonCustom } from '@/components/Button'
import { Language } from '@/types/common'
import { LoginDialogCustom } from '@/components/LoginDialog'
import { useRouter } from 'next/router'

import styles from "./_app.module.scss"

import '../styles/globals.scss'

// Client-side cache, shared for the whole session of the user in the browser.
const clientSideEmotionCache = createEmotionCache()
interface MyAppProps extends AppProps {
  emotionCache?: EmotionCache
}

if(WEB_NODE_ENV === "local") { // 模拟接口
  require("@/mock/index")
}

function MyApp(props: MyAppProps) {
  // const router = useMyRouter()
  const {
    Component,
    emotionCache = clientSideEmotionCache,
    pageProps,
  } = props
  const router = useRouter()

  

  // 初始化
  const handleRecoilInit = ({ set, }: MutableSnapshot) => {
    const language = router.query.language ?? 'en'

    set(globalStateStore, { ...globalData, language: language as Language })
  }

  React.useEffect(() => {
    console.log(WEB_NODE_ENV)
  }, [])

  return (
    <>
      <div
        className={classNames(
          styles._next_main,
        )}
      >
        <div id='_next_main_container' className={classNames('_next_main_container', styles._next_main_container)}>
          <Recoil.RecoilRoot initializeState={handleRecoilInit}>
            <CacheProvider value={emotionCache}>
              <ThemeProvider theme={theme}>
                <InitComponent />
                {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
                <CssBaseline />
                <Component {...pageProps} />
              </ThemeProvider>
            </CacheProvider>
          </Recoil.RecoilRoot>
        </div>
      </div>
    </>
  )
}

MyApp.propTypes = {
  Component: PropTypes.elementType.isRequired,
  pageProps: PropTypes.object.isRequired,
}

MyApp.getInitialProps = async (ctx: any) => {
  try {

  } catch (error) {
    console.log(error)
  }

  return {
    pageProps: {},
  }
}


export default MyApp


```
</details>