[transitions] Fix RTG import in ESM by mj12albert · Pull Request #48645 · mui/material-ui

mj12albert · 2026-06-09T16:06:52Z

I have followed (at least) the PR section of the contributing guide.

code-infra-dashboard · 2026-06-09T16:09:31Z

Deploy preview

https://deploy-preview-48645--material-ui.netlify.app/

Bundle size

Bundle	Parsed size	Gzip size
@mui/material	0B^(0.00%)	0B^(0.00%)
@mui/lab	0B^(0.00%)	0B^(0.00%)
@mui/private-theming	0B^(0.00%)	0B^(0.00%)
@mui/system	0B^(0.00%)	0B^(0.00%)
@mui/utils	0B^(0.00%)	0B^(0.00%)

Details of bundle changes

Check out the code infra dashboard for more information about this PR.

brijeshb42 · 2026-06-10T06:00:19Z

Here's the package diff.
There's cjs in someplaces where it should be esm. Can you check ?

Janpot · 2026-06-15T09:58:34Z

I believe codesandbox doesn't support imports.
It seems like your intention is
```
// ./package.json
"imports": {
  "#mui/TransitionGroupContext": {
    "import": "react-transition-group/esm/TransitionGroupContext.js",
    "require": "react-transition-group/cjs/TransitionGroupContext.js",
    "default": "react-transition-group/esm/TransitionGroupContext.js"
  }
}
```
Is that a correct assumption? This should be perfectly legal to do. Shall we just update code-infra such that you can override import and require targets correctly? We can build on top of [code-infra] Generate package.json imports field on build mui-public#1533 (we'd still be breaking codesandbox demos though)

mj12albert · 2026-06-15T11:08:19Z

Is that a correct assumption?

@Janpot I think splitting import/require/default wouldn't work for the react-router-node-esm-ssr setup (it's added to /examples here):

examples/react-router-node-esm-ssr/package.json has "type": "module"

react-router build produces a server entry that is loaded by Node as ESM

The app imports MUI transitions, for example Collapse

The built MUI ESM file imports #mui/TransitionGroupContext

Since Node is resolving that from ESM code, Node selects the import condition

That sends Node to react-transition-group/esm/TransitionGroupContext.js

In RTG 4.4.5, that file is intended for bundlers. RTG does not mark it as native Node ESM with "type": "module" or an exports map

On supported Node versions like Node 16/18, Node treats that .js file as CommonJS and then errors when it sees import React from 'react'

So a more direct mapping (instead of mapping to src/internal/*) would be:

"#mui/TransitionGroupContext": {
  "node": "react-transition-group/cjs/TransitionGroupContext.js",
  "browser": "react-transition-group/esm/TransitionGroupContext.js",
  "default": "react-transition-group/esm/TransitionGroupContext.js"
}

Janpot · 2026-06-15T12:35:32Z

Ok, that seems semantically correct. We also don't really need the browser condition I suppose? We only want to force node on cjs.

  "#mui/TransitionGroupContext": {
    "node": "react-transition-group/cjs/TransitionGroupContext.js",
    "default": {
      "import": "react-transition-group/esm/TransitionGroupContext.js",
      "require": "react-transition-group/cjs/TransitionGroupContext.js",
      "default": "react-transition-group/esm/TransitionGroupContext.js",
    }
  }

Adding tests in code-infra for this scenario.

Now about codesandbox...

mj12albert · 2026-06-15T19:46:24Z

@Janpot Without browser, a webpack browser app using Material UI via require()/CJS could face the duplicate context risk again?

require('@mui/material/Collapse') selects the CJS build

CJS build does require('#mui/TransitionGroupContext')

There is no top-level browser condition, so resolution falls into default

Since the request is CJS, the nested require condition wins

Collapse gets react-transition-group/cjs/TransitionGroupContext.js

Separately, Webpack’s browser defaults prefer package module over main, so require('react-transition-group') can resolve RTG to esm/index.js

RTG TransitionGroup provides react-transition-group/esm/TransitionGroupContext.js

TransitionGroup and Collapse now use two different React contexts

Janpot · 2026-06-15T20:41:51Z

👍 ok, makes sense

mj12albert · 2026-06-17T12:12:35Z

Changed the fix, latest canary:

pnpm add https://pkg.pr.new/mui/material-ui/@mui/material@8752430

@Janpot It doesn't use package imports and CSB works now: https://codesandbox.io/p/sandbox/confident-snow-whlrhk

Janpot

👍 I think I can live with a browser field, as long as it doesn't include any of our own paths. Thanks for looking into it.

Janpot · 2026-06-17T18:53:24Z

  return `./${resolvedPath.replace('\\', '/')}`;
 }

+function rewriteTransitionGroupContextImport() {


this isn't needed anymore right?

It's still needed as the first part of the fix, so that builds rewrite the import to react-transition-group/cjs/TransitionGroupContext.js for the node setups

Additionally, the "browser" field rewrites this to react-transition-group/esm/TransitionGroupContext.js for browser bundlers to handle the Webpack+CJS case

Why not just import from react-transition-group/cjs/TransitionGroupContext.js in the source?

Oh I didn't even think about this as a possibility

The Codex evaluation is that: it could work, but changing it in the source like that is riskier because in the repo we alias '@mui/material' to 'packages/mui-material/src', so it's a larger surface area to check for issues

Whereas this babel "plugin" is just fixing the built package, whatdo you think? @Janpot

Whereas this babel "plugin" is just fixing the built package, whatdo you think?

tbh, that reply of codex doesn't make much sense to me. Ideally we don't mess too much with the build system. Any weird workaround only makes it harder for us to move it forward towards more modern tooling. Did you try if just the following + browser condition works?

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

Actually this also reminds me of a similar "fix" we did for next.js document, but that doesn't have to load in the browser.

brijeshb42 · 2026-06-18T03:42:15Z

+        ) {
+          // Use the explicit CJS file for Node builds; package.json's `browser`
+          // field redirects this request to RTG's ESM file in browser bundlers.
+          babelPath.node.source.value = 'react-transition-group/cjs/TransitionGroupContext.js';


Why can't this transform to esm for the esm build of our package instead of the current cjs in both the cases ?
The output Transition.mjs file has react-transition-group/cjs/TransitionGroupContext.js as the import path instead of esm.

@brijeshb42 The issue is that react-transition-group/esm/TransitionGroupContext.js contains ESM syntax, but their package.json does not have "type": "module", it uses this older "module": https://github.com/reactjs/react-transition-group/blob/2989b5b87b4b4d1001f21c8efa503049ffb4fe8d/package.json#L5-L6

This causes Node 16/18 to treat it as CJS and error, does that make sense? (this is my understanding of a long Codex explanation)

Ok. Got it. Ideally, it should have had mjs extension if no type: module in package.json

brijeshb42 · 2026-06-18T05:44:50Z

Best case would be to contribute the required change back to the repo.

mj12albert added scope: transitions Changes related to the transitions. type: regression A bug, but worse, it used to behave as expected. labels Jun 9, 2026

mj12albert force-pushed the fix-rtg-esm-import branch 3 times, most recently from 535ae44 to 7fec9ff Compare June 10, 2026 05:12

mj12albert requested a review from brijeshb42 June 10, 2026 05:12

mj12albert force-pushed the fix-rtg-esm-import branch 2 times, most recently from c5ca3e9 to 5e9396f Compare June 14, 2026 19:10

github-actions Bot added the PR: out-of-date The pull request has merge conflicts and can't be merged. label Jun 15, 2026

mj12albert force-pushed the fix-rtg-esm-import branch from be3b553 to 4dea53d Compare June 15, 2026 09:07

github-actions Bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged. label Jun 15, 2026

fix RTG import in ESM

c6ba36b

mj12albert force-pushed the fix-rtg-esm-import branch from 4dea53d to c6ba36b Compare June 15, 2026 09:30

This comment was marked as outdated.

Sign in to view

mj12albert marked this pull request as ready for review June 15, 2026 09:42

mj12albert requested review from Janpot, silviuaavram and siriwatknp June 15, 2026 09:42

mj12albert commented Jun 15, 2026

View reviewed changes

Comment thread babel.config.mjs Outdated

Janpot mentioned this pull request Jun 15, 2026

[code-infra] Test imports field with bare-specifier conditions mui/mui-public#1546

Merged

alt fix without package import

8752430

Janpot reviewed Jun 17, 2026

View reviewed changes

remove temp examples

90aef5f

Janpot reviewed Jun 17, 2026

View reviewed changes

mj12albert mentioned this pull request Jun 17, 2026

[examples] Testing ESM setups #48688

Draft

1 task

Merge branch 'master' into fix-rtg-esm-import

54a4a1d

mj12albert requested a review from Janpot June 17, 2026 22:26

brijeshb42 reviewed Jun 18, 2026

View reviewed changes

try direct import from RTG cjs path

ab7f810

Janpot approved these changes Jun 18, 2026

View reviewed changes

Uh oh!

Conversation

mj12albert commented Jun 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

code-infra-dashboard Bot commented Jun 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Deploy preview

Bundle size

Uh oh!

brijeshb42 commented Jun 10, 2026

Uh oh!

This comment was marked as outdated.

Uh oh!

Uh oh!

Janpot commented Jun 15, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

mj12albert commented Jun 15, 2026

Uh oh!

Janpot commented Jun 15, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

mj12albert commented Jun 15, 2026

Uh oh!

Janpot commented Jun 15, 2026

Uh oh!

mj12albert commented Jun 17, 2026

Uh oh!

Janpot left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Janpot Jun 17, 2026

Choose a reason for hiding this comment

Uh oh!

mj12albert Jun 17, 2026

Choose a reason for hiding this comment

Uh oh!

Janpot Jun 18, 2026

Choose a reason for hiding this comment

Uh oh!

mj12albert Jun 18, 2026

Choose a reason for hiding this comment

Uh oh!

Janpot Jun 18, 2026

Choose a reason for hiding this comment

Uh oh!

brijeshb42 Jun 18, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

mj12albert Jun 18, 2026

Choose a reason for hiding this comment

Uh oh!

brijeshb42 Jun 18, 2026

Choose a reason for hiding this comment

Uh oh!

brijeshb42 commented Jun 18, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

mj12albert commented Jun 9, 2026 •

edited

Loading

code-infra-dashboard Bot commented Jun 9, 2026 •

edited

Loading

Janpot commented Jun 15, 2026 •

edited

Loading

Janpot commented Jun 15, 2026 •

edited

Loading

Janpot left a comment •

edited

Loading

brijeshb42 Jun 18, 2026 •

edited

Loading