material-ui icon indicating copy to clipboard operation
material-ui copied to clipboard

Path-based imports causing component files to explode in size

Open MordechaiWein opened this issue 5 months ago • 4 comments

Summary

Hi team,

Because MUI recommends avoiding barrel imports (e.g., import { Box, Typography } from '@mui/material') for dev-performance reasons, we’re forced to use path-based imports for every single component:

import Box from '@mui/material/Box'; import Typography from '@mui/material/Typography'; import Button from '@mui/material/Button'; import Card from '@mui/material/Card';

In larger apps, this creates a real DX problem. Simple components end up with 10–15+ import lines, making files balloon in size and reducing readability. It feels unnecessarily repetitive and noisy.

Requested: A supported, optimized way to import multiple components together without triggering the dev-performance issues that currently make barrel imports unusable (especially with Vite + MUI v5.15). Even an official “safe barrel” or generated import map would help tremendously.

This area impacts day-to-day productivity in a big way. Any guidance or plans to address this would be greatly appreciated.

Thanks

Examples

No response

Motivation

No response

Search keywords: imports

MordechaiWein avatar Nov 28 '25 17:11 MordechaiWein

Because MUI recommends avoiding barrel imports

To note that this is a vite recommendation. You may find further guidance in the accompanying issue.

Even an official “safe barrel” or generated import map would help tremendously.

Can you clarify further what you envision these solutions to look like exactly, and how they would alleviate the problem?

Janpot avatar Dec 02 '25 09:12 Janpot

Someway to be able to import multiple mui components on 1 line

MordechaiWein avatar Dec 02 '25 14:12 MordechaiWein

Please respond The problem is specific to Vite dev mode, where importing from @mui/material (the barrel) triggers thousands of module requests. This forces us into path-based imports, which drastically increases import boilerplate in real-world apps.

What I'm asking for: Some MUI-supported mechanism that allows grouped imports (e.g., multiple components on one line) without reverting to the full barrel that causes Vite to load the entire library.

For example, an officially documented pattern, a generated deep-import map, or any “safe barrel” approach that avoids pulling in unused modules during Vite’s dependency graph resolution.

The goal is simply to reduce import noise while staying aligned with Vite’s performance constraints.

MordechaiWein avatar Dec 04 '25 05:12 MordechaiWein

For example, an officially documented pattern, a generated deep-import map, or any “safe barrel” approach that avoids pulling in unused modules during Vite’s dependency graph resolution.

Do you have any concrete actionable proposals? I don't know what you mean by a "safe barrel" or how a "generated deep-import map" would solve the problem.

Janpot avatar Dec 04 '25 08:12 Janpot

Since the issue is missing key information and has been inactive for 7 days, it has been automatically closed. If you wish to see the issue reopened, please provide the missing information.

github-actions[bot] avatar Dec 11 '25 12:12 github-actions[bot]