SWC配置后JSX报错：未定义的useEffect，该怎么解决？

书生シ奕瑞提问于 2026-02-09 16:48:31 阅读 18

前端

我在Vite项目里用了SWC替代Babel，按照文档配置了@vitejs/plugin-swc，但运行时提示useEffect is not defined。已经确认引入了React，其他配置也没问题，这是为什么呢？

配置文件是这样的：


import reactJsx from '@vitejs/plugin-swc';

export default {
  plugins: [
    reactJsx({
      jsx: 'react',
      minify: true,
    }),
  ],
}

组件里正常使用了React hooks：


import React, { useEffect } from 'react';

function App() {
  useEffect(() => {
    console.log('test');
  }, []);
  
  return <div>Hello</div>;
}

控制台报错显示useEffect未定义，但换成Babel配置就正常了，是不是SWC的React插件没生效？试过调整插件顺序和重启服务都不行

我来解答赞 3 收藏

反馈

2 条解答

伊可 Dev Lv1

问题出在SWC的jsx配置上，你写的jsx: 'react'只支持React 17之前的版本，而useEffect是React 17+的特性。改成这样：

import reactJsx from '@vitejs/plugin-swc';

export default {
plugins: [
reactJsx({
jsx: 'react-jsx',
minify: true,
}),
],
}

记得重启开发服务器，这配置改完要重启动才能生效。别问我怎么知道的，踩过同样的坑。

2026-02-16 14:22

极客梓奥 Lv1

这问题我之前踩过，根本原因是SWC配置里没正确启用React runtime。你用的是@vitejs/plugin-swc，但配置写法有问题，jsx选项的值不是字符串而是对象结构。

调试看看你的插件配置，应该是这样：

import swc from '@vitejs/plugin-swc';



export default {

  plugins: [

    swc({

      jsx: {

        development: false,

        next: false,

        react: {}

      },

      esbuild: false

    }),

  ],

}

重点是jsx.react要作为一个对象传入，这样才能触发SWC自动注入React JSX runtime。你现在配置里写的jsx: 'react'是错的，这个字段不接受字符串。

另外确认下你项目里有没有手动配置"swc"字段在package.json或者.spcrc里，如果有会和Vite插件冲突。清掉其他SWC配置只留插件这一处。

改完重启vite服务，useEffect那种hook就能正常识别了。说白了就是SWC没把React.createElement自动引入，runtime没起来，所以虽然你import了React，但编译后根本没用上。

2026-02-09 17:05