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

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

前端

我用 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” } }，但没用。

构建工具

我来解答赞 2 收藏

反馈

1 条解答

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