Babel未转译JSX问题求助：执行yarn build时遇报错

Hey there! Let's work through why your yarn build is failing because JSX isn't getting transpiled before Webpack runs. Based on what you've shared, here are the most common misconfigurations to check step by step:

1. Verify You Have All Required Babel Dependencies #

It's easy to miss key packages when simplifying configurations. Make sure these dev dependencies are installed and listed in your package.json:

• @babel/core: The core Babel compiler
• @babel/preset-react: The preset that handles JSX transpilation
• babel-loader: The bridge between Babel and Webpack

If any are missing, install them with:

yarn add @babel/core @babel/preset-react babel-loader --dev

2. Check Your Webpack Config's Module Rules & Resolve Settings #

This is where most issues crop up. Ensure your webpack.config.js properly targets .jsx files and uses Babel to transpile them:

Critical Config Snippets to Include: #

module.exports = {
  // ... other config (entry, output, etc.)
  module: {
    rules: [
      {
        // Match both .js and .jsx files
        test: /\.(js|jsx)$/,
        // Skip transpiling node_modules (avoids conflicts and unnecessary work)
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            // Tell Babel to use the React preset to process JSX
            presets: ['@babel/preset-react']
          }
        }
      }
    ]
  },
  resolve: {
    // Let Webpack automatically resolve these extensions
    // This lets you import files without typing .js/.jsx every time
    extensions: ['.js', '.jsx']
  }
};

Two frequent mistakes here:

• Forgetting to add .jsx to resolve.extensions (Webpack won't recognize the file type otherwise)
• Not excluding node_modules (can cause unexpected errors or slow builds)

3. Confirm Your Babel Configuration (If Using a Separate File) #

If you're using a standalone Babel config file like .babelrc or babel.config.json, make sure it includes the React preset:

{
  "presets": ["@babel/preset-react"]
}

Note: If you already specified the preset in webpack.config.js under babel-loader options, you don't need to repeat it here—but keeping settings consistent avoids confusion.

4. Double-Check Your Webpack Entry Point #

Ensure your Webpack entry is pointing directly to your ClientApp.jsx file, either with the full extension or relying on the resolve.extensions setting. For example:

entry: './js/ClientApp.jsx'

If you've gone through all these steps and still hit the error, sharing the exact error message plus the relevant sections of your package.json (dependencies/devDependencies) and full webpack.config.js would help narrow things down further.

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