你碰到的这个Unexpected token错误，本质是Webpack默认无法解析JSX语法——<App />这种写法属于React的JSX语法，不是标准JavaScript，必须借助Babel相关的loader来转译后，Webpack才能正确处理。下面一步步帮你搞定：

1. 安装必要的转译依赖 #

首先得给项目添加Babel相关的开发依赖，用来转译JSX和ES6+语法：

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

或者直接把这些依赖加到package.json的devDependencies里：

"devDependencies": {
  "react-frame-component": "^2.0.2",
  "webpack": "^3.10.0",
  "webpack-dev-server": "^2.11.1",
  "babel-core": "^6.26.3",
  "babel-loader": "^7.1.5",
  "babel-preset-env": "^1.7.0",
  "babel-preset-react": "^6.24.1"
}

2. 修改Webpack配置，添加loader规则 #

更新你的webpack.config.js，加入module.rules配置，让Webpack用babel-loader处理.js和.jsx文件：

var packageJSON = require('./package.json');
var path = require('path');
var webpack = require('webpack');
const PATHS = {
 build: path.join(__dirname, 'target', 'classes', 'META-INF', 'resources', 'webjars', packageJSON.name, packageJSON.version)
};
module.exports = {
 entry: './app/index2.js',
 output: {
 path: PATHS.build,
 filename: 'app-bundle.js'
 },
 resolve: {extensions: ['.js', '.jsx']},
 // 新增这部分配置
 module: {
   rules: [
     {
       test: /\.(js|jsx)$/,
       exclude: /node_modules/,
       use: 'babel-loader'
     }
   ]
 }
};

3. 添加Babel配置文件 #

在项目根目录创建.babelrc文件，告诉Babel用哪些预设来转译代码：

{
  "presets": ["env", "react"]
}

4. 修复app.jsx里的代码问题 #

你的app.jsx里有两个小问题：

• JSX返回值不能是转义字符串，应该直接写JSX标签；
• ReactDOM的导入和使用大小写要统一。
  修改后的app.jsx：

import React from "react";
import ReactDOM from "react-dom"; // 这里统一成ReactDOM
class App extends React.Component {
 render() {
   return <p>Hello from React to the World!</p>; // 直接写JSX，不要转义字符串
 }
}
const app = document.getElementById("react");
const element = <App />;
const ref = ReactDOM.render(element, app);

5. 确认frontend-maven-plugin的配置（pom.xml） #

确保你的pom.xml里的frontend-maven-plugin配置正确，能执行npm安装和构建命令，示例配置如下：

<plugin>
  <groupId>com.github.eirslett</groupId>
  <artifactId>frontend-maven-plugin</artifactId>
  <version>1.12.0</version>
  <executions>
    <execution>
      <id>install node and npm</id>
      <goals>
        <goal>install-node-and-npm</goal>
      </goals>
      <configuration>
        <nodeVersion>v14.21.3</nodeVersion> <!-- 选一个兼容webpack3的Node版本 -->
        <npmVersion>6.14.18</npmVersion>
      </configuration>
    </execution>
    <execution>
      <id>npm install</id>
      <goals>
        <goal>npm</goal>
      </goals>
      <configuration>
        <arguments>install</arguments>
      </configuration>
    </execution>
    <execution>
      <id>npm run build</id>
      <goals>
        <goal>npm</goal>
      </goals>
      <configuration>
        <arguments>run build</arguments>
      </configuration>
    </execution>
  </executions>
</plugin>

现在你可以重新执行mvn clean install，Webpack就能正确转译JSX代码，打包也能顺利完成了。

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