SWC 编译 React 时为啥不识别 JSX 语法？

司徒光磊提问于 2026-03-05 14:54:23 阅读 49

前端

我用 SWC 替换 Babel 做构建，但一写 JSX 就报错，说 Unexpected token。明明装了 @swc/core 和 @swc/cli，也配了 .swcrc，但还是不行。

这是我的组件代码：

import React from 'react';

const App = () => {
  return <div>Hello SWC!</div>;
};

export default App;

是不是 .swcrc 配置漏了啥？我试过加 “jsc”: { “parser”: { “syntax”: “ecmascript” } }，但没用。

构建工具

我来解答赞 10 收藏

反馈

2 条解答

♫艳珂 Lv1

问题找到了，你配置里漏了最关键的一个东西：JSX 解析开关。

根本原因

SWC 和 Babel 不太一样，Babel 默认装了 @babel/preset-react 就能解析 JSX，但 SWC 需要你在 .swcrc 里明确告诉它"我要解析 JSX"。你只设置了 syntax: "ecmascript" 是远远不够的，ecmascript 这个语法集本身不包含 JSX。

解决方法

改一下你的 .swcrc 配置：

{

  "jsc": {

    "parser": {

      "syntax": "ecmascript",

      "jsx": true

    },

    "transform": {

      "react": {

        "runtime": "automatic"

      }

    }

  }

}

关键点解释一下：

jsc.parser.jsx 设置为 true 是告诉 SWC "我要解析 JSX 语法"，没有这个它看到

这种标签就报 Unexpected token。

jsc.transform.react.runtime 这个是 React 17 引入的新 JSX Transform。如果你用的是 React 17 或更高版本，设置 "automatic" 可以不用在每个文件里手动 import React。SWC 会自动处理 JSX 的转换。

如果你的项目还是 React 16 或更早的版本，把 runtime 改成 "classic"：

"react": {

  "runtime": "classic",

  "pragma": "React.createElement",

  "pragmaFrag": "React.Fragment"

}

验证一下

改完配置后重新跑你的构建命令，应该就能正常编译了。如果还有问题，检查一下你的 @swc/cli 用的是什么版本，太老的版本可能会有一些奇奇怪怪的 bug。

还有一个小提醒：确保你的文件扩展名是 .jsx 或者 .tsx（如果用 TypeScript），SWC 默认不会把 .js 文件当成 JSX 来处理，除非你明确配置了。

2026-03-19 04:00

Code°玉研 Lv1

根本原因是SWC默认不处理JSX语法，必须显式配置。你的.swcrc配置里parser.syntax设置错了，应该用typescript而不是ecmascript，因为JSX语法是从TypeScript解析器继承的。

正确配置应该是这样：

{

  "jsc": {

    "parser": {

      "syntax": "typescript",

      "tsx": true,

      "decorators": false,

      "dynamicImport": false

    },

    "transform": {

      "react": {

        "runtime": "automatic",

        "pragma": "React.createElement",

        "pragmaFrag": "React.Fragment",

        "throwIfNamespace": false,

        "development": false,

        "useBuiltins": false

      }

    }

  }

}

关键点解释：
1. syntax必须设为typescript，虽然名字是typescript但实际上包含了JSX解析能力
2. tsx要设为true来启用JSX支持
3. transform.react部分配置了React相关的编译行为，runtime设为automatic表示用新的JSX运行时（React 17+）

另外注意你的代码里import了React但其实新版本JSX运行时不需要这个，如果要保持兼容可以保留。

如果你用的是React 17+想完全去掉React导入，可以改成：

const App = () => {

  return Hello SWC!
;

};

但这时.swcrc里要把runtime设为automatic，这样SWC会自动从react/jsx-runtime导入需要的函数。

2026-03-05 15:09