💻

• Would you like to work on a fix?

How are you using Babel?

Programmatic API (babel.transform, babel.parse)

Input code

We use the following programmatic API to transform to JS file.

 const { code } = await babel.transformAsync(source, transformOptions);

Configuration file name

No response

Configuration

const babelConfig = {
  presets: ['@babel/preset-typescript'],
  plugins: [],
  generatorOpts: { retainLines: true },
  babelrc: false,
  configFile: false,
};

Current and expected behavior

Current Behaviour (Unrelated type comments added in the output JS file)

TS file: (CustomColor.tsx)

// Update the Button's color prop options
declare module '@mui/material/Button' {
  interface ButtonPropsColorOverrides {
    neutral: true;
  }
}

export default function CustomColor() {
  return (
    <ThemeProvider theme={theme}>
      <Button color="neutral" variant="contained">
        neutral
      </Button>
    </ThemeProvider>
  );
}

Output JS file:

--- a/docs/data/material/customization/palette/CustomColor.js
+++ b/docs/data/material/customization/palette/CustomColor.js
@@ -11,6 +11,8 @@ const theme = createTheme({
   },
 });

+// Update the Button's color prop options
+
 export default function CustomColor() {
   return (
     <ThemeProvider theme={theme}>

Expected Behaviour (No type comments added in the output JS file)

TS file: (CustomColor.tsx)

// Update the Button's color prop options
declare module '@mui/material/Button' {
  interface ButtonPropsColorOverrides {
    neutral: true;
  }
}

export default function CustomColor() {
  return (
    <ThemeProvider theme={theme}>
      <Button color="neutral" variant="contained">
        neutral
      </Button>
    </ThemeProvider>
  );
}

Output JS file:

const theme = createTheme({
   },
 });

 export default function CustomColor() {
   return (
     <ThemeProvider theme={theme}>

Environment

Babel version - 7.21.4

System:
OS: Windows 10 10.0.10240

Binaries:
Node: 14.21.0 - C:\Program Files\nodejs\node.EXE
Yarn: 1.22.19 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
npm: 6.14.17 - C:\Program Files\nodejs\npm.CMD

Browsers:
Chrome: 111.0.5563.149
Edge: Spartan (20.10240.17146.0)

npmPackages:
@emotion/react: ^11.10.6 => 11.10.6
@emotion/styled: ^11.10.6 => 11.10.6
@mui/base: 5.0.0-alpha.126
@mui/codemod: 5.12.0
@mui/core-downloads-tracker: 5.12.1
@mui/docs: 5.12.0
@mui/envinfo: 2.0.8
@mui/icons-material: 5.11.16
@mui/internal-waterfall: 1.0.0
@mui/joy: 5.0.0-alpha.76
@mui/lab: 5.0.0-alpha.127
@mui/markdown: 5.0.0
@mui/material: 5.12.1
@mui/material-next: 6.0.0-alpha.82
@mui/private-theming: 5.12.0
@mui/styled-engine: 5.12.0
@mui/styled-engine-sc: 5.12.0
@mui/styles: 5.12.0
@mui/system: 5.12.1
@mui/types: 7.2.4
@mui/utils: 5.12.0
@mui/x-data-grid: 6.0.0-alpha.14
@mui/x-data-grid-generator: 6.0.0-alpha.14
@mui/x-data-grid-premium: 6.0.0-alpha.14
@mui/x-data-grid-pro: 6.0.0-alpha.14
@mui/x-date-pickers: 6.0.0-alpha.14
@mui/x-date-pickers-pro: 6.0.0-alpha.14
@mui/x-license-pro: 6.0.0-alpha.14
@types/react: ^18.0.26 => 18.0.26
react: ^18.2.0 => 18.2.0
react-dom: ^18.2.0 => 18.2.0
styled-components: 5.3.9
typescript: ^4.9.5 => 4.9.5

Possible solution

No response

Additional context

Could be related to changes done in PR #15427. Had raised in the issue initially in #15427 (comment).

This is a blocker for us to update babel to version 7.21.4. PR - mui/material-ui#36815