React+Laravel项目执行npm run build报错：缺少文件处理Loader

1. 安装必需的Babel依赖 #

在项目根目录执行命令，安装处理JSX与ES6+语法的核心依赖：

npm install --save-dev babel-loader @babel/core @babel/preset-react @babel/preset-env

2. 配置Webpack处理JSX文件 #

修改webpack.config.js，添加针对.js/.jsx文件的转译规则，确保Webpack用Babel处理JSX语法：

module.exports = {
  // 保留你原有其他配置
  module: {
    rules: [
      // 新增JSX处理规则
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      },
      // 你的其他规则（如CSS、静态资源处理等）
    ]
  },
  // 让Webpack自动识别.jsx扩展名
  resolve: {
    extensions: ['.js', '.jsx']
  }
};

3. 添加Babel配置文件 #

在项目根目录创建.babelrc文件，指定React与环境预设：

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

4. 检查组件导入与入口文件 #

确认入口文件（如index.js）能正确识别JSX组件，比如导入.jsx组件时可省略扩展名：

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

5. 重新执行构建 #

完成配置后，再次运行构建命令：

npm run build

额外排查点（若仍有问题） #

• 确认所有依赖安装无报错，可删除node_modules和package-lock.json后重新执行npm install
• 检查组件文件扩展名是否为.jsx，或调整Webpack规则的test匹配项
• 若使用Laravel Mix而非自定义Webpack配置，只需在webpack.mix.js中添加.react()：

  mix.js('resources/js/app.js', 'public/js')
     .react()
     .sass('resources/sass/app.scss', 'public/css');
  

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