[MUI] styled_default is not a function

react + vite 환경에서 mui를 사용하여 컴포넌트 제작중인데
이런 에러가 난다.

사실 mui가 아니라 Joy UI를 사용중이지만 둘다 발생하는듯 하다.

Mui 컴포넌트를 import 하고 컴포넌트로 사용하면 에러가 나는데,
Vite와 호환 이슈 인듯 하다.

이럴 땐, Vite 설정에서 optimizeDeps에 사용한 컴포넌트를 추가해준다.

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import basicSsl from '@vitejs/plugin-basic-ssl';

export default defineConfig({
  plugins: [react(), basicSsl()],
  optimizeDeps: {
    include: ['@mui/material/Tooltip', '@emotion/styled'], // 👈👈
  },
});

아래 방법은 나에게 작동하지 않았다.

// as-is
import { ThemeProvider } from '@mui/material';
// to-be
import { ThemeProvider } from '@mui/material/styles';

[참고]
https://stackoverflow.com/questions/72097831/popper-styled-default-is-not-a-function-mui-5-6-0-material-ui