[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