@mui/material@9.1.0: ERR_UNSUPPORTED_DIR_IMPORT from new internal/Transition.tsx

[xandris]

Steps to reproduce

Steps:

1. Open this link to live example: https://github.com/xandris/mui-9.1-react-router-dir-import-bug
2. pnpm i
3. pnpm dev --open

Current behavior

Error [ERR_UNSUPPORTED_DIR_IMPORT]: Directory import '/Users/aparker/src/mui-9.1-react-router-dir-import-bug/node_modules/.pnpm/@mui+material@9.1.0_@emotion+react@11.14.0_@types+react@19.2.17_react@19.2.7__@emotion+styled_gwyjmpfxlco5yumojqusgxd2ka/node_modules/react-transition-group/TransitionGroupContext' is not supported resolving ES modules imported from /Users/aparker/src/mui-9.1-react-router-dir-import-bug/node_modules/.pnpm/@mui+material@9.1.0_@emotion+react@11.14.0_@types+react@19.2.17_react@19.2.7__@emotion+styled_gwyjmpfxlco5yumojqusgxd2ka/node_modules/@mui/material/internal/Transition.mjs
Did you mean to import "react-transition-group/cjs/TransitionGroupContext.js"?
    at finalizeResolution (node:internal/modules/esm/resolve:259:11)
    at moduleResolve (node:internal/modules/esm/resolve:861:10)
    at defaultResolve (node:internal/modules/esm/resolve:988:11)
    at nextResolve (node:internal/modules/esm/hooks:769:28)
    at o (file:///Users/aparker/src/mui-9.1-react-router-dir-import-bug/node_modules/.pnpm/@tailwindcss+node@4.3.0/node_modules/@tailwindcss/node/dist/esm-cache.loader.mjs:1:69)
    at nextResolve (node:internal/modules/esm/hooks:769:28)
    at AsyncLoaderHooksOnLoaderHookWorker.resolve (node:internal/modules/esm/hooks:265:30)
    at MessagePort.handleMessage (node:internal/modules/esm/worker:251:24)
    at [nodejs.internal.kHybridDispatch] (node:internal/event_target:843:20)
    at MessagePort.<anonymous> (node:internal/per_context/messageport:23:28)

I believe the way react-router works prevents synthetic directory imports from working but i'm not sure

https://github.com/mui/material-ui/blob/master/packages/mui-material/src/internal/Transition.tsx#L9

import TransitionGroupContext from 'react-transition-group/TransitionGroupContext';

maybe it should be

import TransitionGroupContext from 'react-transition-group/esm/TransitionGroupContext.js';

that react-transition-group package doesn't seem super amenable to subpath imports for whatever reason. the TransitionGroupContext/ directory in the package has a package.json that attempts to steer the importer toward esm/TransitionGroupContext.js but that doesn't work in certain contexts like react-router's build tool

Expected behavior

it shouldn't crash

Context

use @mui/material in my react-router project

Your environment

npx @mui/envinfo

System: OS: macOS 26.5.1 Binaries: Node: 26.0.0 - /opt/homebrew/bin/node npm: 11.16.0 - /opt/homebrew/bin/npm pnpm: 9.4.0 - /opt/homebrew/bin/pnpm Browsers: Chrome: 149.0.7827.53 Edge: Not Found Firefox: 151.0.3 <~ I used this one Safari: 26.5

Search keywords: ERR_UNSUPPORTED_DIR_IMPORT TransitionGroupContext

[jslemesipt]

same here

[grifin85]

I have this issue only when run unit test

[ddolcimascolo]

Same here. Premium customer with order id 78178