求助：material-ui-next的Modal组件无法被Babel转译为ES5兼容代码

Hey there, let's work through this Material-UI Next Modal transpilation issue you're facing—getting that ES5 compatibility sorted out is totally doable!

核心问题拆解 #

Your current setup has two key issues:

1. You're using outdated Babel presets (es2015, stage-*), which are no longer maintained and don't handle modern syntax targeting properly.
2. By default, Webpack and Babel skip transpiling code in node_modules—but Material-UI Next's source includes untranspiled ES6+ syntax that breaks older browsers.

Step-by-Step Fixes #

1. Upgrade Babel to Modern Standards #

First, replace those old presets with the current, supported ones. Start by installing the necessary dependencies:

npm install --save-dev @babel/core @babel/preset-env @babel/preset-react @babel/plugin-proposal-class-properties @babel/plugin-proposal-object-rest-spread core-js@3

Then update your .babelrc to use the new configuration:

{
  "presets": [
    ["@babel/preset-env", {
      "targets": {
        "browsers": ["ie 11", "> 1%", "last 2 versions"]
      },
      "useBuiltIns": "usage",
      "corejs": 3
    }],
    "@babel/preset-react"
  ],
  "plugins": [
    "@babel/plugin-proposal-class-properties",
    "@babel/plugin-proposal-object-rest-spread"
  ]
}

Notes:

• @babel/preset-env automatically transpiles syntax based on your target browsers, so you don't need hardcoded presets like es2015 anymore.
• useBuiltIns: usage adds polyfills only for features your code actually uses, which keeps bundle size smaller. You can remove babel-polyfill from your Webpack entry now if you want.

2. Tell Webpack to Transpile Material-UI #

By default, Webpack skips node_modules to speed up builds. We need to make an exception for Material-UI so Babel processes its code too. Update your webpack-config.js module rules:

module.exports = {
  // ... your existing config
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        // Exclude node_modules except for @material-ui packages
        exclude: /node_modules\/(?!(@material-ui)\/)/,
        use: {
          loader: 'babel-loader'
        }
      }
      // ... other rules (css, assets, etc.)
    ]
  }
};

3. Clean Up Redundant Presets #

Your original .babelrc included stage-1 through stage-3—these are deprecated. The plugins we added above (class-properties, object-rest-spread) cover the most common features from those old stage presets. If you need other stage features, add their corresponding @babel/plugin-proposal-* plugins individually.

4. Update Material-UI to the Latest Stable Version #

Older versions of Material-UI Next might have more untranspiled code. Refresh your installation:

npm install @material-ui/core@latest

Verify the Fix #

Run your Webpack build again, then check the output bundle to confirm Modal-related code is now ES5-compatible (no arrow functions, let/const untranspiled, etc.). Test your app in target browsers (like IE11) to make sure the Modal works as expected.

内容的提问来源于stack exchange，提问作者Dag Fort