仅导出组件的X.jsx为何触发react-refresh/only-export-components错误？

代码示例 #

X.jsx：

import React from 'react';

function X() {
  return (
    <svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg" >
      <path d="M14 2C20.6274 2 26 7.37259 26 14C26 20.6274 20.6274 26 14 26C7.37259 26 2 20.6274 2 14C2 7.37259 7.37259 2 14 2Z" fill="black" />
      <path d="M6.60829 7.04756L12.3441 14.7168L6.57214 20.9523H7.87129L12.9248 15.4929L17.0077 20.9523H21.4285L15.3698 12.8517L20.7424 7.04756H19.4432L14.7894 12.0754L11.029 7.04756H6.60829Z" fill="white" />
    </svg>
  );
}

export default X;

收到的错误提示 #

Fast refresh only works when a file only exports components. Use a new file to share constants or functions between components.eslint(react-refresh/only-export-components)
function X(): React.JSX.Element

问题原因及解决办法 #

这个错误来自ESLint规则react-refresh/only-export-components，它要求文件只能导出React组件，保证Fast Refresh热更新功能正常运行。看似代码只导出了组件，但可能有以下几种情况：

可能的原因 #

1. 隐藏的额外导出：检查文件是否存在注释中被忽略的导出、编辑器自动插入的代码，或者不小心添加的其他变量/函数导出。
2. 规则识别偏差：旧版eslint-plugin-react-refresh对函数组件的识别可能存在bug，或者组件缺少明确的类型标注导致误判。
3. 文件扩展名问题：虽然.js也能识别React组件，但.jsx扩展名更明确，部分环境下可能因此触发规则误报。

解决办法 #

• 确认无额外导出：确保文件中只有这个组件的默认导出，没有其他任何导出内容。
• 调整组件写法：改用箭头函数定义组件，或添加明确的类型标注（TypeScript环境）：

import React from 'react';

const X = () => {
  return (
    <svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg" >
      <path d="M14 2C20.6274 2 26 7.37259 26 14C26 20.6274 20.6274 26 14 26C7.37259 26 2 20.6274 2 14C2 7.37259 7.37259 2 14 2Z" fill="black" />
      <path d="M6.60829 7.04756L12.3441 14.7168L6.57214 20.9523H7.87129L12.9248 15.4929L17.0077 20.9523H21.4285L15.3698 12.8517L20.7424 7.04756H19.4432L14.7894 12.0754L11.029 7.04756H6.60829Z" fill="white" />
    </svg>
  );
};

export default X;

• 临时忽略规则：如果确认是误报，可以在文件顶部添加注释关闭该规则：

/* eslint-disable react-refresh/only-export-components */
import React from 'react';
// 组件代码...

• 更新插件：将eslint-plugin-react-refresh升级到最新版本，修复可能存在的识别bug。

内容的提问来源于stack exchange，提问作者Gayathri Devi P