在Fly环境集成React时遇Module parse failed错误求助

Hey there! Let's dig into why you're seeing that "Unexpected token" error when running fly server. The issue boils down to Webpack not properly transforming your JSX code into plain JavaScript—here's how to fix it step by step:

1. 修复Webpack配置中的Babel预设 #

你的webpack.config.js里，babel-loader的选项只指定了env预设，但缺少了处理JSX必需的react预设。虽然你已经在.babelrc里配置了react预设，但Webpack的loader选项有时会覆盖根目录的.babelrc配置，导致JSX无法被转译。

修改webpack.config.js中module.rules里的babel-loader配置：

{
  test: /\.(js|jsx)$/,
  exclude: /(node_modules|bower_components)/,
  loader: 'babel-loader',
  options: {
    presets: ['env', 'react'] // 添加'react'预设以解析JSX
  }
}

2. 验证依赖兼容性（可选但推荐） #

虽然你的package.json已经包含了babel-preset-react，但版本冲突可能导致转译异常。可以通过以下命令重新安装依赖，确保所有Babel相关包版本兼容：

rm -rf node_modules package-lock.json
npm install

3. 额外注意事项（避免后续问题） #

• 你的代码中使用了$('#btn')，但未看到jQuery的依赖声明。如果需要继续使用jQuery，记得先安装：npm install jquery，并在代码中引入：import $ from 'jquery';
• 确保你的HTML文件中存在一个id为container的DOM元素，否则ReactDOM.render会找不到挂载节点。

完成这些修改后，重新运行fly server，应该就能正常解析JSX代码了！

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