[material-ui] recommended babel-plugin-import causes type and runtime mismatch for useTheme location

[JuanCaicedo]

Steps to reproduce

I'm sorry not to include this, but I really struggled to find a way to get either CodeSandbox or StackBlitz to support a custom babelrc and typescript.

Current behavior

I tried setting up the babel-plugin-import optimization described here.

After doing that, I'm importing useTheme like so

import { useTheme } from '@mui/material';

And my typescript compiler shows no errors.

However at runtime I get the following error

    Cannot find module '@mui/material/useTheme' from 'src/my-file.tsx'

If I remove the plugin, both type checking and the runtime are fine, which leads me to think this is a problem with the babel setup.

I see that it's possible to change my import to this

import { useTheme } from '@mui/material/styles';

But I feel like it would be preferable to change my babel set up.

Any ideas how I could configure it differently?

Expected behavior

Importing useTheme at runtime should find the correct function

Context

My full babelrc

{
    "presets": ["next/babel", "@babel/preset-typescript"],
    "plugins": [
        "const-enum",
        "@babel/plugin-transform-shorthand-properties",
        [
            "babel-plugin-import",
            {
                "libraryName": "@mui/material",
                "libraryDirectory": "",
                "camel2DashComponentName": false
            },
            "core"
        ],
        [
            "babel-plugin-import",
            {
                "libraryName": "@mui/icons-material",
                "libraryDirectory": "",
                "camel2DashComponentName": false
            },
            "icons"
        ]
    ]
}

Your environment

  System:
    OS: macOS 14.2.1
  Binaries:
    Node: 20.11.0 - ~/.asdf/installs/nodejs/20.11.0/bin/node
    npm: 10.2.4 - ~/.asdf/plugins/nodejs/shims/npm
    pnpm: Not Found
  Browsers:
    Chrome: 122.0.6261.129
    Edge: 122.0.2365.92
    Safari: 17.2.1
  npmPackages:
    @emotion/react: ^11.11.1 => 11.11.1 
    @emotion/styled: ^11.10.4 => 11.10.6 
    @mui/base:  5.0.0-beta.40 
    @mui/core-downloads-tracker:  5.15.14 
    @mui/icons-material: ^5.10.9 => 5.11.16 
    @mui/material: ^5.10.10 => 5.15.14 
    @mui/private-theming:  5.15.14 
    @mui/styled-engine:  5.15.14 
    @mui/system:  5.15.14 
    @mui/types:  7.2.14 
    @mui/utils:  5.15.14 
    @mui/x-date-pickers: ^6.3.1 => 6.3.1 
    @types/react: ^18.0.21 => 18.0.35 
    react: ^18.2.0 => 18.2.0 
    react-dom: ^18.2.0 => 18.2.0 
    typescript: ^5.0.4 => 5.0.4 

Search keywords: useTheme, type, module, babel-plugin-import

[JuanCaicedo]

It seems to me like the suggestion of resolving everything to @mui/material/* isn't sufficient. I say that because looking at my node_modules/@mui/material/index.js, it seems like there's a lot of things that are export * there, and any of those could also be exporting things from arbitrarily nested places.

Am I missing something about how to set up this plugin for a better optimization?

[ZeeshanTamboli]

@JuanCaicedo Can you please create a minimal GitHub repository that demonstrates the issue and share the link with us? This will allow us to investigate the problem more effectively.

Could you try with adding another entry in the plugin by having the library directory pointed to styles:

{
    "presets": ["next/babel", "@babel/preset-typescript"],
    "plugins": [
        "const-enum",
        "@babel/plugin-transform-shorthand-properties",
        [
            "babel-plugin-import",
            {
                "libraryName": "@mui/material",
                "libraryDirectory": "",
                "camel2DashComponentName": false
            },
            "core"
        ],
        [
            "babel-plugin-import",
            {
                "libraryName": "@mui/material",
                "libraryDirectory": "styles", // Note the library directory
                "camel2DashComponentName": false
            },
            "core"
        ],
        [
            "babel-plugin-import",
            {
                "libraryName": "@mui/icons-material",
                "libraryDirectory": "",
                "camel2DashComponentName": false
            },
            "icons"
        ]
    ]
}

[github-actions]

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.