React 18 SSR搭建报错：Unexpected token '<' 问题求助

Node.js默认仅支持标准JavaScript语法，无法直接解析JSX（即<StaticRouter>这类标签语法）。你的server.js直接使用了JSX，但没有经过Babel编译就被Node执行，导致抛出Unexpected token '<'错误。同时你的webpack配置仅针对客户端代码，没有处理服务端的server.js文件。

方案一：开发环境快速运行（使用babel-node） #

适合开发阶段快速验证，无需额外打包服务端代码：

1. 安装Babel相关依赖：

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

2. 在项目根目录创建.babelrc配置文件，添加Babel预设：

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

3. 修改启动命令，用babel-node替代node执行server.js：

npx babel-node server.js

方案二：生产环境打包服务端代码（推荐） #

生产环境建议将服务端代码打包成Node可直接执行的文件，避免依赖babel-node：

1. 复制现有webpack.config.js，命名为webpack.server.js，修改以下配置项：

const path = require('path');
const webpack = require('webpack');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const webpackNodeExternals = require('webpack-node-externals');

const isProduction = process.env.NODE_ENV === 'production';

module.exports = {
  entry: './server.js', // 入口改为服务端文件
  output: {
    path: path.resolve(__dirname, 'dist'), // 输出到dist目录
    filename: 'server.js'
  },
  mode: isProduction ? 'production': 'development',
  target: 'node', // 服务端打包目标为Node环境
  externals: [webpackNodeExternals()], // 排除node_modules，减少打包体积
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env', '@babel/preset-react'],
          },
        },
      },
      // 若服务端代码中也有静态资源，可添加对应loader，否则可省略
      {
        test: /\.(png|jpg|gif|svg|html)$/,
        use: ['file-loader'],
      },
    ],
  },
  plugins: [
    new CleanWebpackPlugin(),
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
    }),
  ],
};

2. 添加npm脚本到package.json：

{
  "scripts": {
    "build:server": "webpack --config webpack.server.js",
    "start:server": "node dist/server.js"
  }
}

3. 打包并运行服务端：

npm run build:server
npm run start:server

额外修正：客户端webpack配置错误 #

你当前的webpack.config.js是用于打包客户端代码的，其中target: 'node'是错误的，应该改为target: 'web'，否则打包出的bundle.js是针对Node环境的，浏览器无法正常运行：

// webpack.config.js
module.exports = {
  // ...其他配置
  target: 'web', // 修正为web目标
  // ...其他配置
};

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