如何在基于 Rspack 的项目中配置 JSX Runtime

基于 Rspack/Rsbuild 的 React 项目不能通过 tsconfig 里的 jsxImportSource 配置 JSX Runtime，而是要在 swc-loader 里完成配置。

关键配置项

真正决定 JSX 编译目标的是 importSource: "@webspatial/react-sdk"，它会把 JSX Runtime 指向 WebSpatial SDK。

Rsbuild

rsbuild.config.ts

import { defineConfig } from "@rsbuild/core";
import { pluginReact } from "@rsbuild/plugin-react";

export default defineConfig({
  plugins: [
    pluginReact({
      swcReactOptions: {
        runtime: "automatic",
        importSource: "@webspatial/react-sdk",
      },
    }),
  ],
});

Rspack

rspack.config.mjs

export default {
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        exclude: /node_modules/,
        use: {
          loader: "builtin:swc-loader",
          options: {
            jsc: {
              parser: { syntax: "typescript", tsx: true },
              transform: {
                react: {
                  runtime: "automatic",
                  importSource: "@webspatial/react-sdk",
                },
              },
            },
          },
        },
        type: "javascript/auto",
      },
    ],
  },
};