Struggling with Vite and MUI

A possible solution for using Material UI with Vite

Are you having trouble getting a Vite project to work with Material UI (MUI)? If so, I might be able to help you.

I was trying to start using a date picker component from MUI in my React project and started by following the steps in the MUI documentation to install the necessary dependencies:

npm install @mui/material @emotion/react @emotion/styled @mui/x-date-pickers

You can find the installation guide here. Material UI uses Emotion to styling in its project, although you can style your components with Styled Components. However, MUI recommends using Emotion for possible compatibilities.

After installing all necessary dependencies I encontered the following error in browser console:

styled-engine:1 Uncaught Error: Could not resolve "@emotion/styled" imported by "@mui/styled-engine". Is it installed?
    at optional-peer-dep:__vite-optional-peer-dep:@emotion/styled:@mui/styled-engine (styled-engine:1:7)

I discovered that I could insert an option in vite.config.ts that optimize certain dependencies. Here’s what the updated config file looked like:

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

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

The optimizedeps option solved my problem. Did it work for you too? Let me know in the comments below! I hope this helps you get your Vite and MUI project up and running. Thanks for reading!