[material-ui] Minimizing bundle using 'babel-plugin-import' results in 'Cant Resolve...' errors

[RonSmithRX]

Steps to reproduce

Link to live example: https://codesandbox.io/p/devbox/282r7g (Go to "Development" tab).

Steps:

1. Create a CRACO app.
2. Follow the guide in Minimizing Bundle Size docs under Configure Babel (the 'babel-plugin-import' one).
3. Import ThemeProvider like this: import { ThemeProvider } from '@mui/material';.
4. Render the ThemeProvider somewhere, and start your app.

Current behavior

An error is thrown:

Failed to compile.

Module not found: Error: Can't resolve '@mui/material/ThemeProvider' in '<project>/src/Component'

Expected behavior

An error will not be thrown

Context

This error occurs for ThemeProvider, styled, useTheme, and several other imports I believe

Your environment

  System:
    OS: macOS 14.5
  Binaries:
    Node: 20.12.2 - ~/.nvm/versions/node/v20.12.2/bin/node
    npm: 10.7.0 - ~/.nvm/versions/node/v20.12.2/bin/npm
    pnpm: Not Found
  Browsers:
    Chrome: 124.0.6367.209
    Edge: Not Found
    Safari: 17.5
  npmPackages:
    @emotion/react: ^11.11.4 => 11.11.4 
    @emotion/styled: ^11.11.5 => 11.11.5 
    @mui/base:  5.0.0-beta.40 
    @mui/core-downloads-tracker:  5.15.18 
    @mui/icons-material: ^5.15.18 => 5.15.18 
    @mui/lab: ^5.0.0-alpha.170 => 5.0.0-alpha.170 
    @mui/material: ^5.15.18 => 5.15.18 
    @mui/private-theming:  5.15.14 
    @mui/styled-engine:  5.15.14 
    @mui/styles: ^5.15.18 => 5.15.18 
    @mui/system:  5.15.15 
    @mui/types:  7.2.14 
    @mui/utils:  5.15.14 
    @types/react:  16.14.56 
    react: ^18.3.1 => 18.3.1 
    react-dom: ^18.3.1 => 18.3.1 

Search keywords: bundle-size

[xondamirmuminov]

Same problem with me

[ZeeshanTamboli]

This error occurs for ThemeProvider, styled, useTheme, and several other imports I believe

The error occurs for ThemeProvider, styled, useTheme, and other similar imports because they need to be imported from @mui/material/styles because they are available under styles folder. These are transformed to @mui/material/styles/ThemeProvider, etc., while other components like Button are correctly transformed by the Babel plugin i.e import { Button } from '@mui/material' gets transformed to import Button from '@mui/material/Button'.

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

Note

We value your feedback @RonSmithRX! How was your experience with our support team?
If you could spare a moment, we'd love to hear your thoughts in this brief Support Satisfaction survey. Your insights help us improve!

[MylesWardell]

I could not find a way to highlight import errors on the web so leaving this here so somebody else does not have to repeat

{
  regex: '@mui/material(?!/styles)',
  importNames: ['styled', 'useTheme'],
  message: 'Use import from @mui/material/styles',
},
{
  regex: '@mui/material(?!/[a-z]+)',
  importNamePattern: '\S*(Classes)',
  message: 'Use import from @mui/material/styles',
},

My full no-restricted-import list

'no-restricted-imports': [
  'error',
  {
    patterns: [
      {
        group: ['lodash/*'],
        message: "Please use the default import from 'lodash' instead.",
      },
      {
        regex: '@mui/material(?!/styles)',
        importNames: ['styled', 'useTheme', 'StyledEngineProvider', 'MuiThemeProvider'],
        message: 'Use import from @mui/material/styles',
      },
      {
        regex: '@mui/material(?!/[a-z]+)',
        importNamePattern: '\S*(Classes)',
        message: 'Use import from @mui/material/styles',
      },
    ],
  },
],